2012-12-07 20 views
6

मैं त्वरित खोज विजेट के लिए JQuery UI Autocomplete का उपयोग कर रहा हूं। मेरे पास होटल, शहरों, क्षेत्रों आदि जैसे कई समूहीकृत सामान हैं। मैं श्रेणियां प्रस्तुत कर सकता हूं, लेकिन मैं उन्हें लिंक नहीं कर सका। जब मैं कोशिश करता हूं, ui स्वत: पूर्ण प्लगइन आइटम की तरह श्रेणियों का पता लगाने।लिंक के साथ JQuery UI स्वत: पूर्ण रेंडरिंग श्रेणियाँ

"TypeError: item is undefined. this.liveRegion.text(item.value);"

मैं इसे कैसे ठीक कर सकते हैं: यही कारण है कि समस्या नहीं है, लेकिन जब मैं ध्यान केंद्रित उन्हें तीर ऊपर/नीचे का उपयोग कर या माउस का उपयोग, यह मुझे इस तरह एक त्रुटि देता है? मैं कई तरीकों (जैसे 'return false, e.stopPropagation या e.preventDefault') के साथ JQuery यूआई स्वत: पूर्ण के "ध्यान" घटना इस्तेमाल करने की कोशिश, लेकिन यह

काम नहीं किया यहाँ मेरी कोड है:

$.widget("custom.catcomplete", $.ui.autocomplete, { 
     _renderMenu: function (ul, items) { 
      var searchkey = ""; 
      var itemtype = ""; 
      var searchtype = ""; 

      var self = this, currentCategory = ""; 
      $.each(items, function (index, item) { 
       if (typeof item.kelime != 'undefined') { searchkey = item.kelime; } 
       if (item.category != currentCategory) { 
        if (item.category == "Bölge" || item.category == "Şehir") { 
         itemtype = "cat-bolgeler"; 
        } else if (item.category == "Otel") { 
         itemtype = "cat-oteller"; 
         searchtype = "otel"; 
        } else if (item.category == "Yurt Dışı Tur") { 
         itemtype = "cat-ydtur"; 
         searchtype = "yurtdisitur"; 
        } else if (item.category == "Yurt İçi Tur") { 
         itemtype = "cat-yitur"; 
         searchtype = "yurticitur"; 
        } else if (item.category == "Cruise") { 
         itemtype = "cat-cruise"; 
         searchtype = "cruise"; 
        } 
        if (searchtype != "") { 
         ul.append("<li class='ui-autocomplete-category " + itemtype + "' id='" + item.searchid + "'><a href='/arama/" + searchkey + "?k=" + searchtype + "&q=" + searchkey + "'>" + item.category + "</a></li>"); 
        } else { 
         ul.append("<li class='ui-autocomplete-category " + itemtype + "' id='" + item.searchid + "'>" + item.category + "</li>"); 
        } 
        currentCategory = item.category; 
       } 
       self._renderItem(ul, item); 
      }); 
     } 
    }); 

    $(".hizliaratext").catcomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: '/filename.aspx', 
       dataType: "json", 
       contentType: "application/json; charset=utf-8", 
       type: "get", 
       data: { kelime: request.term }, 
       success: function (data) { 
        response($.map(data, function (item) { 
         return { 
          label: item.label, 
          searchid: item.searchid, 
          category: item.category, 
          link: item.link, 
          kelime: item.kelime 
         } 
        })); 
       } 
      }); 
     }, 
     minLength: 3, 
     appendTo: "#hizliara", 
     select: function (event, ui) { 
      window.location = ui.item.link; 
     }, 
     focus: function (event, ui) { 
     } 
    }).data("catcomplete")._renderItem = function (ul, item) { 
     return $("<li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul); 
    }; 

यहाँ नमूना JSON है "? Kelime = अंका" के लिए प्रतिक्रिया:

[{"searchid":2001,"label":"Alba Ankara Hotel","category":"Otel","link":"/otel-detay/alba-ankara-hotel","kelime":"anka"},{"searchid":2238,"label":"Ankara Madi İnci Hotel","category":"Otel","link":"/otel-detay/ankara-madi-inci-hotel"},{"searchid":2244,"label":"Madi Hotel Ankara","category":"Otel","link":"/otel-detay/madi-hotel-ankara"},{"searchid":2403,"label":"City Hotel Ankara","category":"Otel","link":"/otel-detay/city-hotel-ankara"},{"searchid":2404,"label":"Doğa Residence Ankara","category":"Otel","link":"/otel-detay/doga-residence-ankara"},{"searchid":6779,"label":"Ankara","category":"Şehir","link":"/ustaramaliste.aspx?y=6779"},{"searchid":6785,"label":"Ankara/Çankaya","category":"Bölge","link":"/ustaramaliste.aspx?y=6785"},{"searchid":14601,"label":"İzmir/Çankaya","category":"Bölge","link":"/ustaramaliste.aspx?y=14601"}] 
+1

क्या आप कुछ नमूना डेटा प्रदान कर सकते हैं ताकि हम समस्या को पुन: उत्पन्न कर सकें? –

+0

मैंने नमूना JSON प्रतिक्रिया – fgokalp

उत्तर

3

ध्वनि (और दिखता है) आप की तरह चाहते हैं select/focus श्रेणी वस्तुओं के लिए ईवेंट (यदि ऐसा नहीं है तो मैं अपना उत्तर अपडेट करूंगा)।

स्वत: पूर्ण विजेट आंतरिक रूप से सूची आइटमों को item.autocomplete उनके साथ जुड़े डेटा की अपेक्षा करता है। त्रुटि के आसपास पाने के लिए, आप उचित डेटा के साथ अपनी "श्रेणी" आइटम बना सकते हैं। यह आपको select घटना के लिए प्रतिक्रिया करने के लिए सक्षम और त्रुटि focus घटना पर होने वाली से छुटकारा मिल जाएगा:

अपडेट किया गया विजेट कोड:

$.widget("custom.catcomplete", $.ui.autocomplete, { 
    _renderMenu: function(ul, items) { 
     var searchkey = ""; 
     var itemtype = ""; 
     var searchtype = ""; 

     var self = this, 
      currentCategory = ""; 
     $.each(items, function(index, item) { 
      if (typeof item.kelime != 'undefined') { 
       searchkey = item.kelime; 
      } 
      if (item.category != currentCategory) { 
       if (item.category == "Bölge" || item.category == "Şehir") { 
        itemtype = "cat-bolgeler"; 
       } else if (item.category == "Otel") { 
        itemtype = "cat-oteller"; 
        searchtype = "otel"; 
       } else if (item.category == "Yurt Dışı Tur") { 
        itemtype = "cat-ydtur"; 
        searchtype = "yurtdisitur"; 
       } else if (item.category == "Yurt İçi Tur") { 
        itemtype = "cat-yitur"; 
        searchtype = "yurticitur"; 
       } else if (item.category == "Cruise") { 
        itemtype = "cat-cruise"; 
        searchtype = "cruise"; 
       } 
       if (searchtype != "") { 
        ul.append($("<li class='ui-autocomplete-category " + itemtype + "' id='" + item.searchid + "'><a href='/arama/" + searchkey + "?k=" + searchtype + "&q=" + searchkey + "'>" + item.category + "</a></li>").data("item.autocomplete", {})); 
       } else { 
        ul.append($("<li class='ui-autocomplete-category " + itemtype + "' id='" + item.searchid + "'>" + item.category + "</li>").data("item.autocomplete", {})); 
       } 
       currentCategory = item.category; 
      } 
      self._renderItem(ul, item); 
     }); 
    } 
}); 

उदाहरण:http://jsfiddle.net/J5rVP/20/

+0

आपकी सहायता के लिए धन्यवाद जोड़ा। इस कोड ने मेरी समस्या हल की – fgokalp

1

jQuery के लिए -ui-1.10 + डेटा टैग का नाम नीचे "ui-autocomplete-item" में बदल गया है:

ul.append($("<li class='ui-autocomplete-category'>" + item.Type + "</li>").data("ui-autocomplete-item", {})); 
संबंधित मुद्दे