jQuery autocompletar con múltiples valores ajax

Question

estado siguiendo la documentación del sitio de la interfaz de usuario, y miré una serie de tutoriales y conseguí que mi código funcionara, ajax está en la lista de términos que quiero y puede seleccionar uno y coloca el valor y luego ",". Sin embargo, luego no vuelve a solicitar un segundo valor.

Además, cuando ingreso un popup parcial y digamos 10 entradas, la tabulación simplemente va al siguiente campo de formulario, ¿no estoy seguro de qué pasa con mi .bind, quizás una configuración? Si a alguien no le importaría echar un vistazo, ¡sería muy apreciado!

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

Sin embargo, después que no le pide de nuevo por un segundo valor.

Asegúrese de que está escribiendo más de 2 caracteres. La función pasó a search está impidiendo una búsqueda con menos de dos personajes de causar una búsqueda:

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

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

---

Además, cuando entro en un parcial y digo 10 entradas pop-up, la tabulación sólo sirve para el el siguiente campo de formulario, no estoy seguro de lo que está mal con mi .bind, ¿quizás una configuración?

El bind al principio está tratando de evitar que el usuario tabulación del campo cuando un candidato de autocompletar se destacó. Con un autocompletado de valor único, esto generalmente no es un problema porque primero se selecciona el elemento de menú, se coloca en el input y luego se pierde el foco.

Esto cambia cuando quiere valores múltiples en input. Queremos detener esa acción predeterminada de keydown que cambia el enfoque al siguiente campo de entrada.

autocomplete tiene una opción autoFocus que será útil aquí. Garantizará que un candidato sea siempre seleccionado cuando el usuario acceda a la pestaña después de tipear.

No soy capaz de replicar exactamente su situación, pero he creado una demostración que no muestra ninguno de los problemas que está experimentando (todo lo que realmente he hecho es cambiar la fuente y agregar el autoFocus opción): http://jsfiddle.net/zTVKC/