jQuery UI Autocomplete widget de configuration de la recherche

Question

Je suis à la recherche en utilisant le autocomplete jQuery UI widget pour mettre en œuvre recherche d'utilisateur par premier ou dernier Nom. Il ressemble par autocomplete par défaut recherche des mots par ordre de caractère, peu importe son apparition en 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 corresponde à seulement début du mot. Ainsi, dans l'exemple ci-dessus vous obtenez seulement 'asp'. Est-il possible de configurer le widget autocomplete pour le faire?

En fin de compte, il serait encore mieux par nom ou prénom comme il est dans Gmail.

Note: J'essaie de trouver un moyen de le faire en utilisant spécifiquement le widget jQuery UI. Depuis que je suis déjà en utilisant jQuery UI dans mon projet, je prévois de rester avec elle et essayer de ne pas ajouter d'autres bibliothèques à mon application Web.

Answer 1

Dans v1.8rc3 jQuery UI, le widget autocomplete accepte http://jsbin.com/ezifi

quoi il ressemble:

Juste une remarque: je trouve la documentation sur autocomplete être assez immature à ce stade. Je ne trouve pas des exemples qui ont fait cela, et je ne pouvais pas trouver doc travail sur lequel Css fichiers étaient nécessaires ou que les classes Css seraient utilisées. J'ai appris tout cela d'inspecter le code.

Voir aussi comment puis-je coutume -format le plug-in Autocomplete résultats?

Answer 2

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

Il correspond aux caractères commençant seulement.

En ce qui correspondance en se référant prénom ou nom, vous auriez juste pour 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 passez 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 quelques données aux suggestions qui se sont retournés, puis faire l'option lookup un objet, comme ceci:

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

Answer 3

thx cheeso pour intrducing jsbin.com,

i étendu votre code pour soutenir les matchs de première et lastname aussi.

  $("#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 );
      }
  });

demo: http://jsbin.com/ufimu3/

type 'un' ou 're'

Answer 4

Si vous voulez rechercher le début de chaque mot dans la chaîne, une solution plus élégante de sbire est de prendre cheeso de mais il suffit d'utiliser la limite de mot de regexp caractère spécial:

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

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

Answer 5

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

En l'absence d'une telle option dans le plugin jQuery UI, je devine que vous devrez soit utiliser un autre plugin, ou réécrire celui que vous utilisez maintenant.

Answer 6

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