Jquery自動完成選擇不工作

我想選擇自動完成框項目列表。但它不起作用。我已經編寫了這個代碼來獲取物品。每當我使用self._renderItemData = function (ul, item)這個函數定製的方式選擇停止，當我評論這個函數我的代碼工作正常。請幫助我知道我在哪裏錯了。我用jquery ui 1.9編寫代碼。Jquery自動完成選擇不工作

$(document).ready(function() { 
    var term = ""; 
    var type = ""; 
    var key = ""; 
    $("#searchTextBox").autocomplete({ 
     minLength: 2, 
     autoFocus: true, 
     source: function (request, response) { 
      $.ajax({ 
       url: "../CustomHandlers/SearchHandler.ashx", 
       dataType: "json", 
       contentType: 'application/json; charset=utf-8', 
       data: { term: request.term }, 
       success: function (data) { 
        if (!data || data.length == 0) { 
         response([{ 
          label: "noMatched",        
          hcount:0, 
          type: "noResult", 
          key: "noResult"        
         }]);        
        } 
        else { 
         response($.map(data, function(item) { 
          return { 
           label: item.label,         
           hcount:item.record, 
           type: item.type, 
           key: item.key 
          } 
         })) 
        }      
       }     
      }); 

      $.ui.autocomplete.prototype._renderMenu=function (ul, items) { 
       var self = this; 
       currentType = ""; 
       $.each(items, function (index, item) { 
        if (item.type != currentType) { 
         ul.append("<li class='ui-autocomplete-type'>" + item.type + "</li>"); 
         currentType = item.type; 
        } 

        self._renderItemData(ul, item); 

       }); 
       self._renderItemData = function (ul, item) { 
        var searchhtml = "<a class='autocomplitList'>" + item.label + "<span>" + "(" + item.hcount + ") " + "</span>" + "</a>"; 
        return $("<li></li>") 
          .data("item.autocomplete", item) 
          .append(searchhtml) 
          .appendTo(ul); 
       }; 
      } 

     } 

     , select: function (event, ui) 
     { 
       term = ui.item.label; 
       type = ui.item.type; 
       key = ui.item.key; 
       // ui.item.option.selected = true; 


       // $("#searchTextBox").val(ui.item.label); 
       // return false; 
       //var selectedObj = ui.item.key; 
      // alert("Selected: " + selectedObj); 
     } 
     ,open: function (event, ui) { 
       //event.addClass("nodis"); 
     } 
     ,close: function() { 
      // event.removeClass("nodis") 
      this._trigger("close"); 
      } 


    });

來源

2013-03-21 jayesh babel

請作的jsfiddle – Devjosh 2013-03-21 13:04:12

試試這個

$(document).ready(function() { 
    var term = ""; 
    var type = ""; 
    var key = ""; 

    $.ui.autocomplete.prototype._renderMenu = function(ul, items) { 
     var self = this; 
     currentType = ""; 
     $.each(items, function(index, item) { 
        if (item.type != currentType) { 
         ul.append("<li class='ui-autocomplete-type'>" 
           + item.type + "</li>"); 
         currentType = item.type; 
        } 

        self._renderItemData(ul, item); 

       }); 
     self._renderItemData = function(ul, item) { 
      var searchhtml = "<a class='autocomplitList'>" + item.label 
        + "<span>" + "(" + item.hcount + ") " + "</span>" + "</a>"; 
      return $("<li></li>").data("item.autocomplete", item) 
        .append(searchhtml).appendTo(ul); 
     }; 
    } 

    $("#searchTextBox").autocomplete({ 
       minLength : 2, 
       autoFocus : true, 
       source : function(request, response) { 
        response([{ 
           label : "Value 1", 
           hcount : 0, 
           type : "t1", 
           key : "v1" 
          }, { 
           label : "Value 2", 
           hcount : 0, 
           type : "t1", 
           key : "v2" 
          }, { 
           label : "Value 3", 
           hcount : 0, 
           type : "t2", 
           key : "v3" 
          }, { 
           label : "Value 4", 
           hcount : 0, 
           type : "t3", 
           key : "v4" 
          }]); 
       } 

       , 
       select : function(event, ui) { 
        term = ui.item.label; 
        type = ui.item.type; 
        key = ui.item.key; 
        // ui.item.option.selected = true; 

        // $("#searchTextBox").val(ui.item.label); 
        // return false; 
        // var selectedObj = ui.item.key; 
        // alert("Selected: " + selectedObj); 
       }, 
       open : function(event, ui) { 
        // event.addClass("nodis"); 
       }, 
       close : function() { 
        // event.removeClass("nodis") 
        this._trigger("close"); 
       } 

      }); 

    $("#searchTextBox").data('autocomplete')._renderMenu = function(ul, items) { 
     var that = this; 
     var currentType = ""; 
     $.each(items, function(index, item) { 
        if (item.type != currentType) { 
         ul.append("<li class='ui-autocomplete-type'>" 
           + item.type + "</li>"); 
         currentType = item.type; 
        } 
        $("<li></li>").addClass('newp').append($("<a></a>") 
          .text(item.label)).appendTo(ul).data(
          "ui-autocomplete-item", item);; 
       }); 
    } 
});

演示：Fiddle

來源

2013-03-21 13:18:25

感謝阿倫......我會盡量答覆你回來。 – 2013-03-22 04:00:17

Jquery自動完成選擇不工作

回答

相關問題