Jak znaleźć kategorię wybranego elementu w autouzupełnianiu?

Question

Muszę grupować wyniki autouzupełniania i znalazłem następujące solution. Jak mogę określić kategorię wybranej sugestii?

Na przykład powiedzmy, że są kategorie Miasto i Kraj i użytkownik wybiera jedno z miast. Skąd mam wiedzieć, że wybrany przedmiot jest częścią miasta, a nie kategorii kraju (kiedy formularz zostanie przesłany)? Nie chcę również, aby nazwy kategorii były widoczne dla użytkowników.

Co znalazłem dotąd

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

mój kod

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

Aktualizacja

Znalazłem też to code ale nie mogliśmy zorientować się kategorię.

Answer 1

Musisz dodać tę kategorię do response, którą otrzymujesz w wersji source. Proponowane elementy mogą mieć więcej właściwości niż value i label. W przykładach, które posiadasz, używają kategorii. Jeśli dane, które podasz, są dobrze sformułowane, będą po prostu property pozycji, do których możesz uzyskać dostęp za pomocą prostego ui.item.category zdarzenia select.

Jak to:

$.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">