Dans l'INTERFACE utilisateur de jQuery v1.8rc3, la saisie semi-automatique widget accepte une source d' 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.
À partir 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, l' request.term tiendra "new yo".
• Un response de la fonction, une fonction de 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 à l'
$.ui.autocomplete.escapeRegex(req.term); Qui s'échappe du 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
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.
- l'
$.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.
travail de démonstration: http://jsbin.com/ezifi
ce à quoi il ressemble:
![alt text]()
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?
