3

Mi intención es configurar el filtro de materialize para que al digitar me traiga únicamente los datos que contengan los caracteres digitados al inicio de la cadena de texto.

Como se ve en la imagen (Es lo que no quiero que pase).

introducir la descripción de la imagen aquí

$(function() {
  $('input.autocomplete').autocomplete({
    data: {
      "Analista Senior": null,
      "Analista Junior": null,
      "Auxiliar": null,
      "Administrador": null,
      "Coordinador": null
    }
  });
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Autocomplete MaterializeCSS</title>
  <!--Import Google Icon Font-->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css'>
</head>

<body>
  <div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s13">
          <i class="material-icons prefix">textsms</i>
          <input type="text" id="autocomplete" class="autocomplete">
          <label for="autocomplete">Autocomplete</label>
        </div>
      </div>
    </div>
  </div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
</body>

</html>

8
  • Hola @And ¿te refieres a que lo ingresado solo se compare y coincidia con el principio de la palabra?
    – Jorius
    el 7 mar. 2017 a las 20:35
  • @Jorius Exactamente eso es mi intención.
    – user25693
    el 7 mar. 2017 a las 20:37
  • ¿podrías editar tu pregunta y poner el ejemplo, fuente o la documentación de .autocomplete() ?
    – Jorius
    el 7 mar. 2017 a las 20:41
  • Al parecer Materialize no posee esa configuración, una opción sería agregar esa excepción en el código de la librería.
    – Jemonge
    el 7 mar. 2017 a las 20:44
  • 1
    @Jorius no está usando el autocomplete de jQuery UI. MaterializeCSS tiene su propio autocomplete. Acabo de comprobarlo: materializecss.com/forms.html#autocomplete aparentemente lo añadieron en la versión 0.98. Corrigo, fue en la 0.97.7 github.com/Dogfalo/materialize/releases/tag/v0.97.7
    – ffflabs
    el 7 mar. 2017 a las 21:10

2 respuestas 2

2

Respuesta corta: no se puede. El plugin autocomplete de materialize sólo acepta como parámetros de configuración un objeto del tipo:

var conf = {
  data:{...},
  limit:xx,
  onAutocomplete: function() {}
  minLength: xx
}

Y como verás no hay ahí opción para establecer que el match se restrinja al inicio del objeto de resultados

Respuesta larga: si estás pensando en modificar el plugin que viene en materialize, sí se puede. Lamentablemente no es tan trivial como sobreescribir un método de $.fn.autocomplete porque el match se comprueba en un closure declarado dentro del constructor, y no en un método como en el caso de jQuery-UI.

Dicho esto, en el closure declarado en forms.js#L345, específicamente en donde comprueba la existencia de la cadena entre tu objeto data:

if (data.hasOwnProperty(key) &&
    key.toLowerCase().indexOf(val) !== -1 &&
    key.toLowerCase() !== val) {

    ...
}

Tendrías que poner

if (data.hasOwnProperty(key) &&
    key.toLowerCase().indexOf(val) === 0 &&
    key.toLowerCase() !== val) {

    ...
}

Para que esto funcione, me parece que la única manera sería cargar tu propio $.fn.autocomplete después de haber cargado materialize. Y si vas a cargar tu propia versión del plugin, entonces sería más o menos lo mismo que cargar otra librería de autocompletado como select2, selectize o chosen.

1
  • Logre hacer que funcionara el Materialize con el JQueryUI
    – user25693
    el 13 mar. 2017 a las 16:10
0

"Logre hacer que funcionara el Materialize con el JQueryUI" – user25693 el 13 mar. 17 a las 16:10

Que tal amigo, como lograste que funcionara? estoy pasando por el mismo problema, inclui la funcion de autocompletar de materialize en mi formulario y quiero que se muestren solo las sugerencias que comienzan por el mismo caracter y no todos los que lo incluyan, agradezco tu respuesta

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.