jQuery completamento automatico con più valori Ajax

Question

ha seguito la documentazione dal sito dell'interfaccia utente, ha esaminato un numero di esercitazioni e ha ottenuto il mio codice funzionante, è ajax nella lista dei termini che desidero, e puoi selezionarne uno e posiziona il valore e quindi ",". Tuttavia, in seguito non richiede nuovamente un secondo valore.

Inoltre, quando inserisco un partial e dico 10 voci pop-up, il tabbing va al campo modulo successivo, non è sicuro di cosa c'è che non va nel mio .bind, forse un'impostazione? Se qualcuno non mi dispiacerebbe dare un'occhiata, sarebbe molto apprezzato!

function split(val) { 
      return val.split(/,\s*/); 
     } 

     function extractLast(term) { 
      return split(term).pop(); 
     } 

     jQuery('#tagSearch') 
      .bind('keydown', function(event) { 
        if (event.keyCode === jQuery.ui.keyCode.TAB && 
         jQuery(this).data('autocomplete').menu.active) { 
          event.preventDefault(); 
        } 
      }) 
      .autocomplete({ 
       autoFocus: true, 
       source: function(request, add) { 
        console.log('source'); 
        jQuery.getJSON('/get-tags-like.php?term_start=' + request.term, function(response) { 
         var possibleTerms = []; 

         jQuery.each(response, function(i, val) { 
          possibleTerms.push(val.name + ' ' + '(' + val.count + ')'); 
         }); 

         add(jQuery.map(possibleTerms, function(item) { 
          console.log(possibleTerms); 
          return item; 
         }));   
        }); 
       }, 
       focus: function() { 
        console.log('focus'); 
       return false; 
       }, 
       select: function(event, ui) { 
        console.log('select'); 
        var terms = split(this.value); 

        terms.pop(); 

        terms.push(ui.item.value); 

        terms.push(''); 

        this.value = terms.join(','); 

        // At this point, example: 
        // Sony (5) 
       var currentVal = this.value; 

        // Sony (5) - Gets inserted as "Sony" 
        currentVal = currentVal.replace(/\s\(.\)/, ''); 

        this.value = currentVal; 

        return false; 
       }, 
       minLength: 2 
      }); 

Answer 1

Tuttavia, dopo non richiedendo nuovamente per un secondo valore.

Assicurati di digitare più di 2 caratteri. La funzione passata a search impedisce una ricerca con meno di due caratteri da causare una ricerca:

search: function() { 
     var term = extractLast(this.value); 

     if (term.length < 2) { 
      return false; 
     } 
}, 

---

Inoltre, quando entro in un parziale e dico 10 voci pop-up, tabulazione va solo al campo modulo successivo, non sono sicuro di cosa c'è che non va nel mio .bind, forse un'impostazione?

Il bind all'inizio sta tentando di impedire all'utente di tabulazione dal campo quando un candidato di completamento automatico viene evidenziato. Con un singolo completamento automatico, questo di solito non è un problema perché prima viene selezionata la voce di menu, posizionata nello input e quindi lo stato attivo viene perso.

Questo cambia quando si desidera più valori nello input. Vogliamo interrompere l'azione predefinita di keydown che modifica lo stato attivo sul campo di input successivo.

autocomplete ha un'opzione autoFocus che sarà utile qui. Garantirà che un candidato sia sempre selezionato quando l'utente preme la scheda dopo aver digitato.

Non sono in grado di replicare esattamente la situazione, ma ho creato una demo che non mostra nessuno dei problemi che si verificano (tutto ciò che ho fatto è cambiare la fonte e aggiungere autoFocus opzione): http://jsfiddle.net/zTVKC/