ऑटोकंपलेट में चयनित तत्व की श्रेणी कैसे खोजें?

Question

मुझे स्वत: पूर्ण परिणामों को समूहित करने की आवश्यकता है और मुझे निम्नलिखित solution मिल गया है। मैं चयनित सुझाव की श्रेणी कैसे समझ सकता हूं?

उदाहरण के लिए, मान लें कि शहर और देश श्रेणियां हैं और उपयोगकर्ता शहरों में से एक का चयन करता है। मुझे कैसे पता होना चाहिए कि चयनित आइटम शहर का हिस्सा है, न कि देश श्रेणी (जब फॉर्म जमा हो जाता है)? मैं यह भी नहीं चाहता कि श्रेणी के नाम उपयोगकर्ताओं के लिए दृश्यमान हों।

तो मैं क्या पाया है अब तक

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

मेरे कोड

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

अद्यतन

मैं भी इस code पाया है लेकिन वर्ग को समझ नहीं सकता है।

Answer 1

आपको response में श्रेणी शामिल करने की आवश्यकता है जिसे आप source में प्राप्त कर रहे हैं। प्रस्तावित वस्तुओं में value और label से अधिक गुण हो सकते हैं। आपके उदाहरणों में, वे श्रेणी का उपयोग करते हैं। यदि आपके द्वारा प्रदान किया गया डेटा अच्छी तरह से गठित किया गया है, तो यह select ईवेंट पर एक साधारण ui.item.category का उपयोग करके आप आसानी से property आइटमों का उपयोग कर सकते हैं।

इस तरह

:

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