링크가있는 JQuery UI 자동 완성 렌더링 카테고리

Question

빠른 검색 위젯을 위해 JQuery UI 자동 완성 기능을 사용하고 있습니다. 호텔, 도시, 지역 등 여러 그룹화 된 항목이 있습니다. 범주를 렌더링 할 수는 있지만 링크 할 수는 없습니다. 내가 시도 할 때, 자동 완성 플러그인은 항목과 같은 카테고리를 감지합니다.

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

가 어떻게이 문제를 해결할 수 있습니다 : 그것은 문제가되지 않습니다,하지만 난 집중하면 그들을/아래 화살표를 사용하거나 마우스를 사용, 그것은 나이 같은 오류를 반환? 나는 (' return false, e.stopPropagation 또는 e.preventDefault'와 같은) 여러 가지 방법으로 JQuery와 UI 자동 완성의 "초점"이벤트를 사용하려고 노력하지만, 여기에 내 코드의 IT가

를 작동하지 않았다 : 여기

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

Answer 1

사운드 (및 모양) 당신이 원하는 처럼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); 
     }); 
    } 
}); 

예 : 대한 jQueryhttp://jsfiddle.net/J5rVP/20/

Answer 2

-ui-1.10 + 데이터 태그 이름이 아래와 같이 "ui-autocomplete-item"로 변경되었습니다.

ul.append($("<li class='ui-autocomplete-category'>" + item.Type + "</li>").data("ui-autocomplete-item", {}));