web-dev-qa-db-fra.com

Configuration de la recherche de widget de saisie automatique jQuery UI

Je cherche à utiliser le widget jQuery UI autocomplete pour implémenter la recherche d'utilisateur par prénom ou nom. Il semble que la saisie semi-automatique par défaut recherche les mots par séquence de caractères, quelle que soit leur occurrence dans un mot. Donc, si vous avez des données telles que: javascript, asp, haskell et vous tapez 'as' vous obtiendrez tous les trois. Je voudrais qu'il ne corresponde qu'au début de la Parole. Donc, dans l'exemple ci-dessus, vous obtenez seulement 'asp'. Existe-t-il un moyen de configurer le widget de saisie semi-automatique pour ce faire?

En fin de compte, il serait encore mieux de correspondre en commençant par le prénom ou le nom comme dans Gmail.

Remarque: j'essaie de trouver un moyen de le faire en utilisant le widget jQuery UI spécifiquement. Étant donné que j'utilise déjà jQuery UI dans mon projet, je prévois de m'en tenir à cela et d'essayer de ne pas ajouter de bibliothèques supplémentaires à mon application Web.

jqueryjquery-uijquery-pluginsautocompletejquery-ui-autocomplete
65
dev.e.loper

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

À partir de la documentation de saisie semi-automatique:

La troisième variante, le rappel, offre la plus grande flexibilité et peut être utilisée pour connecter n'importe quelle source de données à la saisie semi-automatique. Le rappel obtient deux arguments:

• Un objet request, avec une seule propriété appelée "term", qui fait référence à la valeur actuellement dans la saisie de texte. Par exemple, lorsque l'utilisateur a entré "nouveau yo" dans un champ de ville configuré pour effectuer la saisie semi-automatique, le request.term Contiendra "nouveau yo".
• Une fonction response, un rappel qui attend qu'un seul argument contienne les données à suggérer à l'utilisateur. Ces données doivent être filtrées en fonction du terme fourni et doivent être un tableau au format autorisé pour les données locales simples: String-Array ou Object-Array avec les propriétés label/value/both.

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 au terme de recherche afin que tous les termes significatifs dans le texte tapé par l'utilisateur soient traités comme texte brut. Par exemple, le point (.) Est significatif pour regex. J'ai appris cette fonction escapeRegex en lisant le code source de la saisie semi-automatique.
  • la ligne avec new Regexp(). Il spécifie une expression rationnelle commençant par ^ (Circumflex), ce qui implique qu'elle ne correspondra que lorsque les caractères saisis apparaîtront au début du terme dans le tableau, ce que vous vouliez. Il utilise également l'option "i" qui implique une correspondance insensible à la casse.
  • l'utilitaire $.grep() appelle simplement la fonction fournie sur chaque terme du tableau fourni. Dans ce cas, la fonction utilise simplement l'expression rationnelle pour voir si le terme dans le tableau correspond à ce qui a été tapé.
  • enfin, la réponseFn () est invoquée avec le résultat de la recherche.

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

à quoi il ressemble:

alt text

Juste une note: je trouve que la documentation sur la saisie semi-automatique est assez immature à ce stade. Je n'ai pas trouvé d'exemples qui ont fait cela, et je n'ai pas pu trouver de document de travail sur les fichiers .css nécessaires ou sur les classes .css qui seraient utilisées. J'ai appris tout cela en inspectant le code.

Voir aussi, comment puis-je formater les résultats du plug-in de saisie semi-automatique?

127
Cheeso

J'utilise la saisie semi-automatique de devbridge. http://www.devbridge.com/projects/autocomplete/jquery/

Il correspond uniquement aux caractères de début.

alt text

En ce qui concerne la correspondance basée sur le prénom ou le nom, il vous suffit de fournir une liste de recherche avec le prénom et le nom.

Exemple d'utilisation:

  var wordlist = [
      'January', 'February', 'March', 'April', 'May', 'June',
      'July', 'August', 'September', 'October', 'November',
      'December' ]; 

      var acOptions = {
          minChars:2,
          delimiter: /(,|;)\s*/, // regex or character
          maxHeight:400,
          width:300,
          zIndex: 9999,
          deferRequestBy: 10, // miliseconds

          // callback function:
          onSelect: function(value, data){
              //$('#input1').autocomplete(acOptions);
              if (typeof data == "undefined") {
                  alert('You selected: ' + value );
              }else {
                  alert('You selected: ' + value + ', ' + data);
              }
          },

          // local autosuggest options:
          lookup: wordlist
      };

L'option lookup que vous transmettez pour initialiser le contrôle de saisie semi-automatique peut être une liste ou un objet. Ce qui précède a montré une liste simple. Si vous voulez que certaines données soient jointes aux suggestions qui sont renvoyées, faites de l'option lookup un objet, comme ceci:

var lookuplist = {
    suggestions:   [ "Jan", "Feb", "Mar", "Apr", "May" ],
    data :         [ 31, 28, 31, 30, 31, ]
};
6
Cheeso

thx cheeso pour intrduire jsbin.com,

j'ai étendu votre code pour prendre également en charge les correspondances de prénom et de nom.

  $("#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/

tapez 'an' ou 're'

5
Phil Rykoff

Si vous souhaitez rechercher le début de chaque mot dans la chaîne, une solution plus élégante à l'homme de main consiste à prendre le cheeso, mais utilisez simplement le caractère spécial de limite de mot regexp:

var matcher = new RegExp( "\\b" + re, "i" );

Exemple: http://jsbin.com/utojoh/2 (essayez de rechercher 'bl')

2
Nader

Où obtenez-vous les données pour remplir la saisie semi-automatique? Est-ce à partir d'une base de données? Si c'est le cas, vous pouvez faire ce que vous voulez dans votre requête et renvoyer uniquement les résultats qui correspondent au début de chaque mot (prénom/nom)

0
Mark

Il y a n autre plug-in de saisie semi-automatique jQuery qui recherche éventuellement juste au début de chaque élément (l'option est matchContains=false , je pense que c'est aussi la valeur par défaut).

Étant donné l'absence d'une telle option dans le plug-in jQuery UI, je suppose que vous devrez soit utiliser un autre plug-in, soit réécrire celui que vous utilisez maintenant.

0
Paul D. Waite