Complétion Ajax automatique (ou autosuggest) avec TAB complétion/autofill similaire à la ligne de commande de l'interpréteur de commandes shell?

Question

Je suis implémenter une fonctionnalité de saisie semi-automatique AJAX/autosuggest, et non seulement je veux faire les suggestions montrent habituelles qui sont semblables à ce que l'utilisateur a tapé, mais je voudrais laisser l'utilisateur ne complétions partielles pour diminuer la frappe. Alors, imaginez que mon dictionnaire a ces valeurs: "pomme verte", "poire verte", "fruit vert", "ciel bleu", "eau bleue", "sillage bleu". Si l'utilisateur tape "g", les suggestions devraient être "pomme verte", "poire verte", "fruit vert", et je voudrais laisser l'utilisateur appuyer sur TAB ou quelque chose pour mettre à jour sa requête à "vert", alors ils pourraient taper "a" et ils seraient complétés à "pomme verte".

Je suis en train de modéliser ce après l'achèvement de la ligne de commande shell linux.

Pouvez-vous recommander un contrôle/script qui fait cela? Ou une modification/personnalisation d'un contrôle existant?

Answer 1

Ce type de saisie semi-automatique n'est pas pris en charge dans les plugins d'auto-complétion populaires (pour jQuery, Scripty. ..) parce que généralement ceux-ci fournissent une interface utilisateur déroulante pour choisir la correspondance voulue.

Alors supposons que nous n'avons pas un hors-the-box solution. Boo-ho. À quel point peut-il être difficile à coder?

// takes a text field and an array of strings for autocompletion 
function autocomplete(input, data) { 
    if (input.value.length == input.selectionStart && input.value.length == input.selectionEnd) { 
    var candidates = [] 
    // filter data to find only strings that start with existing value 
    for (var i=0; i < data.length; i++) { 
     if (data[i].indexOf(input.value) == 0 && data[i].length > input.value.length) 
     candidates.push(data[i]) 
    } 

    if (candidates.length > 0) { 
     // some candidates for autocompletion are found 
     if (candidates.length == 1) input.value = candidates[0] 
     else input.value = longestInCommon(candidates, input.value.length) 
     return true 
    } 
    } 
    return false 
} 

// finds the longest common substring in the given data set. 
// takes an array of strings and a starting index 
function longestInCommon(candidates, index) { 
    var i, ch, memo 
    do { 
    memo = null 
    for (i=0; i < candidates.length; i++) { 
     ch = candidates[i].charAt(index) 
     if (!ch) break 
     if (!memo) memo = ch 
     else if (ch != memo) break 
    } 
    } while (i == candidates.length && ++index) 

    return candidates[0].slice(0, index) 
} 

Test page here - il devrait fonctionner dans les navigateurs normaux. Pour soutenir IE utiliser l'écoute des événements de prototype.js, jQuery ou autre.

Answer 2

Si votre utilisation de jQuery, un grand plug-in est http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/. Il vous suffit d'utiliser css pour masquer la liste déroulante et laisser la fonctionnalité d'auto-complétion activée.

Je pense que ce serait simple de faire un plugin jquery pour vous-même ...

Le long des lignes de Ecoutez l'Tabulation Lorsque la touche de tabulation est enfoncé, onglet de déclenchement: appuyez sur input.autotab

$(document).keydown(function(e){ if (e.keyCode = (tab-key?)){ 
     $('input.autotab').trigger('tab:press'); 
    });  

Bind onglet input.autotab: événement de presse (dans une chaque boucle ... si le focus == true etc.) soit une matrice javascript recherche, ou une demande de XHR, (ajax), puis réglez que valeur de l'entrée en tant que données renvoyées.

$('input.autotab').bind('tab:press', function(){ 
     if (this.hasFocus){ 
     this.disabled = true; 
     $.get('/autotab', { q: $(this).val() }, function(response){ 
       $(this).val(response); 
       this.disabled = false; 
     }, function(){ this.disabled = false; }); 
     } 
    }); 

Dans votre script autosuggestion, écrire donc une fois que la valeur est adaptée plus d'une fois dans la base de données (utiliser une boucle avec un indice, arrêt à l'élément d'index où le premier élément est mis en correspondance), et le retour la valeur jusqu'à ce point.

Answer 3

La façon la plus simple serait de simplement utiliser le jQuery et le plugin autocomplete. En regardant le html stackoverflow, il semble qu'ils utilisent la même chose. Semble fonctionner très bien pour la plupart des navigateurs. Le plugin a également une démo étendue qui devrait vous aider à comprendre comment l'implémenter à vos besoins spécifiques.

Voici un échantillon rapide de la page d'accueil du plugin:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
       "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" /> 
    <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" /> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script> 
    <script> 
    $(document).ready(function(){ 
    var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" "); 
    $("#example").autocomplete(data); 
    }); 
    </script> 

</head> 
<body> 
    API Reference: <input id="example" /> (try "C" or "E") 
</body> 
</html> 

Plus se trouvent ici http://docs.jquery.com/Plugins/Autocomplete