Come trovare la categoria dell'elemento selezionato in Completamento automatico?

Question

Ho bisogno di raggruppare i risultati del completamento automatico e ho trovato seguente solution. Come posso capire la categoria dei suggerimenti selezionati?

Ad esempio, diciamo che ci sono le categorie Città e Paese e l'utente seleziona una delle città. Come faccio a sapere che l'articolo selezionato fa parte della città e non della categoria di paese (quando viene inviato il modulo)? Inoltre, non voglio che i nomi delle categorie siano visibili agli utenti.

Quello che ho trovato finora

$.widget("custom.catcomplete", $.ui.autocomplete, { 
     _renderMenu: function(ul, items) { 
      var self = this, 
       currentCategory = ""; 
      $.each(items, function(index, item) { 
       if (item.category != currentCategory) { 
        ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); 
        currentCategory = item.category; 
       } 
       self._renderItem(ul, item); 
      }); 
     } 
    }); 

My Code

$(function() { 
    $("#box1").autocomplete({ 
     source: function(e, r) { 
      var t, s = "http://localhost:8080/MyProject/autoComplete/box1"; 
      $.ajax({ 
       url: s, 
       dataType: "json", 
       data: { 
        q: e.term 
       }, 
       success: function(e) { 
        r(e) 
       } 
      }) 

     }, 
     select: function(event, ui) { 
      if (ui.item) { 
       alert("box one is seleted"); 
      } 
     }, 

    }), $("#box2").autocomplete({ 
     source: function(e, r) { 
      $.ajax({ 
       url: "http://localhost:8080/MyProject/autoComplete/box2", 
       dataType: "json", 
       data: { 
        q: e.term 
       }, 
       success: function(e) { 
        r(e) 
       } 
      }) 
     }, 
     select: function(event, ui) { 
      if (ui.item) { 
       alert("box two is selected"); 
      } 
     }, 
    }) 

Aggiornamento

Ho anche trovato questo code ma non riusciva a capire la categoria.

Answer 1

È necessario includere la categoria nello response nel source. Gli articoli proposti possono avere più proprietà di value e label. Negli esempi che hai, usano la categoria. Se i dati forniti sono ben formati, sarà semplicemente un property degli elementi a cui è possibile accedere utilizzando un semplice ui.item.category sull'evento select.

Ti piace questa:

$.widget("custom.catcomplete", $.ui.autocomplete, { 
 
    _create: function() { 
 
    this._super(); 
 
    this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)"); 
 
    }, 
 
    _renderMenu: function(ul, items) { 
 
    var that = this, 
 
     currentCategory = ""; 
 
    $.each(items, function(index, item) { 
 
     var li; 
 
     if (item.category != currentCategory) { 
 
     ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); 
 
     currentCategory = item.category; 
 
     } 
 
     li = that._renderItemData(ul, item); 
 
     if (item.category) { 
 
     li.attr("aria-label", item.category + " : " + item.label); 
 
     } 
 
    }); 
 
    } 
 
}); 
 

 

 
$("#search").catcomplete({//make sure you call your custom autocomplete 
 
    delay: 0, 
 
    source: function(request, callback) { 
 
    callback(data); //here you must make sure the response you're getting has category. 
 
    }, 
 
    select: function(e, ui) { 
 
    // if the cateogry is in your response, on select, your item will have a category property. 
 
    alert('Item category: ' + ui.item.category) 
 
    } 
 
}); 
 

 

 
// Modify your response so you have something similar to this. 
 
var data = [{ 
 
    label: "annhhx10", 
 
    category: "Products" 
 
}, { 
 
    label: "annk K12", 
 
    category: "Products" 
 
}, { 
 
    label: "annttop C13", 
 
    category: "Products" 
 
}, { 
 
    label: "anders andersson", 
 
    category: "People" 
 
}, { 
 
    label: "andreas andersson", 
 
    category: "People" 
 
}, { 
 
    label: "andreas johnson", 
 
    category: "People" 
 
}];

.ui-autocomplete-category { 
 
    font-weight: bold; 
 
    padding: .2em .4em; 
 
    margin: .8em 0 .2em; 
 
    line-height: 1.5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> 
 
<label for="search">Search:</label> 
 
<input id="search">