autosuggestion multipla su un ingresso in base alla categoria e criteri

Question

Ho bisogno di alcuni input sul autosuggestione multipla durante la ricerca. La stringa di ricerca si compone di Categoria, criteri facoltativi e valore.

Esempio: Category.Criteria

Ho provato ad utilizzare jQuery con il completamento automatico, il primo livello per la categoria di autosuggest funziona bene, una volta che l'utente seleziona una categoria e tipi in Siamo tenuti a mostrare il “” criteri di configurati per quella categoria.

Il 2 ° set di suggestione auto non appare immediatamente quando l'utente seleziona una categoria e tipo un "", ma sembra una volta ci concentriamo fuori della zona di ingresso e tornare indietro.

Il suo è il codice https://jsfiddle.net/krishnanpb/gh32nad6/1/

Passi: "" 1. Seleziona una categoria e quindi digitare, spostare fuori della zona di ingresso e di riorientare la seconda serie di compare suggestione.

$(document).ready(function() { 
     BindControls(); 
    }); 

    function BindControls() { 
     var Categories = [ 
     "Customer", 
     "Equipment", 
     "Link", 
     "Location", 
     "Network", 
     "Service", 
     "Termination"]; 

     $('#tags').autocomplete({ 
      source: Categories, 
      minLength: 0, 
      scroll: true 
     }).focus(function() { 
      $(this).autocomplete("search", ""); 
     }); 

     $('#tags').bind('keypress', function(e) { 

      var code = (e.keyCode ? e.keyCode : e.which); 
      if(code == 46) { 
      console.log(". pressed"); 
      var Criteria = [ 
      "name", 
      "id"]; 
      } 
      $("#tags").autocomplete({ 
       source: Criteria 
      }); 
     }); 
    } 

html:

Tags:

Answer 1

Si consiglia di utilizzare l'evento KeyUp. Sono anche costretto a riorientare sull'ingresso dopo la modifica della sorgente.

$("#tags").keyup(function(event) { 
    if(event.which == 190) { 
     console.log(". pressed"); 
     var Criteria = ["name", "id"]; 
     $('#tags').autocomplete({ source: Criteria }); 
     $('#tags').focus(); 
    } 
});