Ajax completamento automatico (o autosuggest) con completamento TAB / riempimento automatico simile a guscio completamento della linea di comando?

Question

Sono l'attuazione di un AJAX completamento automatico / funzione autosuggest, e non solo voglio fare i soliti mostrare suggerimenti che sono simili a ciò che l'utente ha digitato, ma mi piacerebbe per permettere all'utente di fare completamenti parziali per salvare la digitazione .

Quindi, immaginare il mio dizionario ha questi valori in esso:. "Mela verde", "pera verde", "frutta verde", "cielo blu", "acqua blu", "blu scia"

Se l'utente digita "g", i suggerimenti dovrebbero essere "mela verde", "pera verde", "frutta verde", e mi piacerebbe lasciare che il TAB colpo utente o qualcosa di aggiornare il suo query " verde", allora potrebbero tipo 'a' e avevano ottenere completato a 'mela verde'.

Sto cercando di modellare questo dopo il completamento della linea di comando della shell Linux.

Mi può consigliare un controllo / script che fa questo? O una modifica / personalizzazione di un controllo esistente?

Answer 1

Questo tipo specifico di completamento automatico non è supportato in plugin completamento automatico popolari (per jQuery, Scripty ...) perché di solito chi forniscono un'interfaccia utente a discesa per scegliere la partita desiderata.

Quindi supponiamo che non abbiamo una soluzione out-of-the-box. Boo-ho. Quanto sia difficile può essere quello di codificare in su?

// 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)
}

qui - dovrebbe funzionare nei browser normali. Per sostenere l'uso di IE evento di ascolto da prototype.js, jQuery o altro.

Answer 2

Se la vostra utilizzando jQuery, un ottimo plugin è http://bassistance.de / jquery-plugins / jquery-plugin-completamento automatico / . Basta usare i CSS per nascondere la casella a discesa, e lasciare la funzionalità di scheda-auto-completa.

Credo che sarebbe stato semplice per fare un plugin jQuery per te ...

Lungo le linee di       Ascoltate il tasto Tab       Quando si preme il tasto di tabulazione, scheda Trigger: stampa l'input.autotab

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

scheda di input.autotab Bind: evento stampa (in ogni ciclo ... se fuoco == true etc.) sia una ricerca array JavaScript, o una richiesta XHR, (ajax), quindi impostare il valore di ingresso come dati restituiti.

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

Nello script autosuggest, scriverlo così una volta il valore è abbinato più di una volta nel database (utilizzare un ciclo for con un indice, fermandosi al elemento di indice in cui il primo elemento è abbinata), e restituire il valore fino a quel punto.

Answer 3

Il modo più semplice sarebbe quella di utilizzare solo il jQuery e il plugin completamento automatico. Guardando il codice html della StackOverflow, sembra che stanno usando la stessa roba. Sembra funzionare molto bene per la maggior parte dei browser. Il plugin ha anche una vasta demo che dovrebbe aiutare a capire come implementare alle proprie esigenze specifiche.

Ecco un rapido esempio dal plugin home page:

<!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>

Altro per essere trovato qui http://docs.jquery.com/Plugins/Autocomplete