jQuery UI Autocomplete widget de recherche de configuration

Dans l'INTERFACE utilisateur de jQuery v1.8rc3, le widget de saisie semi-automatique accepte un source option, qui peut être soit une chaîne de caractères, un tableau, ou une fonction de rappel. Si c'est une chaîne, la saisie semi-automatique est un GET sur l'URL pour obtenir des options/suggestions. Si un tableau, la saisie semi-automatique effectue une recherche, comme vous l'avez souligné, la présence de l'tapé caractères dans n'importe quelle position dans les termes de la matrice. La dernière variante est ce que vous voulez - la fonction de rappel.

De la saisie semi-automatique de la documentation:

La troisième variation, la fonction de rappel, offre la plus grande flexibilité, et peut être utilisé pour connecter une source de données pour la saisie semi-automatique. Le callback reçoit deux arguments:

• Un request objet, avec une propriété unique appelée "terme", qui se réfère à la valeur actuellement dans la saisie de texte. Par exemple, lorsque l'utilisateur a entré "new yo" dans une ville champ de saisie semi-automatique, le request.term tiendra "new yo".

• Un response fonction, un rappel qui s'attend à un seul argument pour contenir les données de suggérer à l'utilisateur. Ces données doivent être filtrées en fonction sur le long terme, et doit être un tableau dans le format de permis pour de simples données locales: String-Array ou de l'Objet-Tableau avec étiquette/valeur/les deux propriétés.

Exemple de code:

var wordlist= [ "about", "above", "across", "after", "against",
                "along", "among", "around", "at", "before", 
                "behind", "below", "beneath", "beside", "between", 
                "beyond", "but", "by", "despite", "down", "during", 
                "except", "for", "from", "in", "inside", "into", 
                "like", "near", "of", "off", "on", "onto", "out", 
                "outside", "over", "past", "since", "through", 
                "throughout", "till", "to", "toward", "under", 
                "underneath", "until", "up", "upon", "with", 
                "within", "without"] ; 

$("#input1").autocomplete({
    //The source option can be an array of terms.  In this case, if
    //the typed characters appear in any position in a term, then the
    //term is included in the autocomplete list.
    //The source option can also be a function that performs the search,
    //and calls a response function with the matched entries.
    source: function(req, responseFn) {
        var re = $.ui.autocomplete.escapeRegex(req.term);
        var matcher = new RegExp( "^" + re, "i" );
        var a = $.grep( wordlist, function(item,index){
            return matcher.test(item);
        });
        responseFn( a );
    }
});

Quelques points clés:

• l'appel à $.ui.autocomplete.escapeRegex(req.term); Que échappe le terme de recherche
  de sorte que tout regex termes significatifs dans le texte tapé par l'utilisateur sont traitées comme du texte brut. Par exemple, le point (.) est significative pour les regex. J'ai appris de ce escapeRegex fonction par la lecture de la saisie semi-automatique du code source.
• la ligne avec new Regexp(). Il indique une regexp début avec ^ (accent Circonflexe), ce qui implique, il correspond seulement lorsque les caractères saisis apparaissent au début de ce terme dans le tableau, qui est ce que tu voulais. Il utilise également le "je" option qui implique un casse match.
• la $.grep() utilitaire appelle simplement la fonction fournie sur chaque terme dans le tableau. La fonction, dans ce cas utilise la regexp pour voir si le terme dans le tableau correspond à ce qui a été tapé.
• enfin, la responseFn() est appelée avec le résultat de la recherche.

de travail de démonstration: http://jsbin.com/ezifi

à quoi il ressemble:

Juste une remarque: j'ai trouver de la documentation sur la saisie semi-automatique pour être assez immature à ce point. Je n'ai pas trouvé des exemples qui l'a fait, et je ne pouvais pas trouver de travail de la doc sur des .les fichiers css sont nécessaires ou qui .les classes css serait utilisé. J'ai appris tout cela à partir d'inspecter le code.

Voir aussi, comment puis-je personnalisé-format de la saisie semi-automatique plug-in résultats?

thx cheeso pour intrducing jsbin.com,

j'ai élargi votre code à l'appui de la première et de nom correspond à, trop.

  $("#input1").autocomplete({
      source: function(req, responseFn) {
          addMessage("search on: '" + req.term + "'<br/>");

          var matches = new Array();
          var needle = req.term.toLowerCase();

          var len = wordlist.length;
          for(i = 0; i < len; ++i)
          {
              var haystack = wordlist[i].toLowerCase();
              if(haystack.indexOf(needle) == 0 ||
                 haystack.indexOf(" " + needle) != -1)
              {
                  matches.push(wordlist[i]);
              }
          }

          addMessage("Result: " + matches.length + " items<br/>");
          responseFn( matches );
      }
  });

démo: http://jsbin.com/ufimu3/

type 'un' ou 're'

Il y a un autre jQuery autocomplete plug-in qui éventuellement recherches juste au début de chaque élément (l'option est matchContains=false, je pense que c'est le défaut de trop).

Compte tenu de l'absence d'une telle option dans le plugin jQuery UI, je devine que vous devrez utiliser un autre plugin, ou de réécriture de celui que vous utilisez en ce moment.