Mục kết xuất tự động hoàn thành jQuery không được thực hiện

Question

Tôi có hai hộp văn bản (văn bản kiểu nhập) trên cùng một HTML sử dụng cùng một tính năng tự động hoàn thành. Hộp văn bản đầu tiên hoạt động tốt, nhưng hộp văn bản thứ hai không hiển thị kết quả. Nó giao tiếp với máy chủ và tôi nhận được kết quả, nhưng hàm render thậm chí không được gọi. Sự khác biệt duy nhất giữa các yếu tố đầu vào là một trong một div bắt đầu ẩn và tôi hiển thị loại như cửa sổ Dialog bằng cách đặt z-order cao và che dấu HTML.

Đây là CSS cho div nơi hộp nhập thứ hai được đặt.

.windowBooking { 
     position:absolute; 
     width:450px; 
    /* height:200px; */ 
     display:none; 
     z-index:9999; 
     padding:20px; 
    } 

Chức năng autocomplete:

$(".makeClass").autocomplete({ 
    source: function (request, response) { 
     $('#Code').val(); //clear code value 
     $.ajax({ 
      url: "myUrl", 
      type: 'POST', 
      contentType: "application/json; charset=utf-8", 
      dataType: 'json', //What kind of Result is expected. (Ex json, xml, etc) 
      data: "{'searchItem':'" + request.term + "'}", 
      success: function (data) { 
       var item = []; 
       var len = data.d.length; 
       for (var i = 0; i < len; i++) { 
        var obj = { name: data.d[i].MakeReport, code: data.d[i].MakeCode }; 
        item.push(obj); 
       } 
       response(item); 
      } 
     }) 
    }, 
    focus: function (event, ui) { 
     $(this).val(ui.item.name); 
     return false; 
    }, 
    select: function (event, ui) { 
     $('#Code').val(ui.item.code); 
     $('#Name').val(ui.item.name); 
     $(this).val(ui.item.name); 
     return false; 
    }, 
    open: function() { 
     $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
    }, 
    close: function() { 
     $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
    }, 
    minLength: 2, 
    delay: 250 
}).data("autocomplete")._renderItem = function (ul, item) { 
    var temp = item.name; 
    return $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a>" + item.name + "</a>") 
       .appendTo(ul); 
}; 

Các hộp đầu vào sử dụng cùng lớp gọi autocomplete.

<input id="OtherMake" type="text" maxlength="30" size="20" class="makeClass"/> <!-- It works --> 

    <div id="dialogPlus" class="windowBooking"> 
            : 
    <input type="text" id="MakeName" class="makeClass" /> <!-- doesn't work.--> 
            : 
</div> 

Bất kỳ ý tưởng nào, tại sao lại hiển thị trên một hộp nhập liệu và không có trong hộp nhập liệu khác? Hãy để tôi làm cho rõ ràng, trên hộp đầu vào thứ hai điều duy nhất không hoạt động là hàm renderItem mà vì một lý do nào đó nó không được thực hiện. Trên màn hình, bạn có thể thấy rất nhiều không xác định nhưng nếu bạn chọn bất kỳ giá trị không xác định nào thì hộp nhập liệu sẽ được lấp đầy với giá trị chính xác.

Answer 1

Tôi vẫn không biết điều gì đang gây ra sự cố, nhưng tôi có thể làm cho nó hoạt động bằng cách sử dụng ID thay vì sử dụng một lớp để truy cập tự động hoàn tất. Tôi đoán là một hàm render được nối thêm không thể được chia sẻ giữa hai hộp đầu vào? Tôi không biết, nếu ai đó biết câu trả lời và có thể chia sẻ với chúng tôi, nó sẽ rất tuyệt.

Dù sao thì, nếu có ai đó có cùng vấn đề lạ với tôi và nó bị kẹt với vấn đề, thì đây là cách tôi giải quyết nó. Vì, tôi không muốn lặp lại cùng một mã hai lần, tôi đã di chuyển tất cả logic tự động hoàn thành sang một var và hàm render tới một var khác và sử dụng ID hộp đầu vào để gán tự động hoàn thành.

var makeAutocomplete = { 
     source: function (request, response) { 
      $('#Code').val(); //clear code value 
      $.ajax({ 
       url: myUrl, 
       type: 'POST', 
       contentType: "application/json; charset=utf-8", 
       dataType: 'json', //What kind of Result is expected. (Ex json, xml, etc) 
       data: "{'searchItem':'" + request.term + "'}", 
       success: function (data) { 
        var item = []; 
        var len = data.d.length; 
        for (var i = 0; i < len; i++) { 
         var obj = { name: data.d[i].MakeReport, code: data.d[i].MakeCode }; 
         item.push(obj); 
        } 
        response(item); 
       } 
      }) 
     }, 
     focus: function (event, ui) { 
      $(this).val(ui.item.name); 
      return false; 
     }, 
     select: function (event, ui) { 
      $('#Code').val(ui.item.code); 
      $('#Name').val(ui.item.name); 
      $(this).val(ui.item.name); 
      return false; 
     }, 
     open: function() { 
      $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
     }, 
     close: function() { 
      $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
     }, 
     minLength: 2, 
     delay: 250 
    }; 

    var renderList = function (ul, item) { 
     return $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a>" + item.name + "</a>") 
       .appendTo(ul); 
    }; 

    $("#OtherMake").autocomplete(makeAutocomplete).data("autocomplete")._renderItem = renderList; 
    $("#MakeName").autocomplete(makeAutocomplete).data("autocomplete")._renderItem = renderList; 

Answer 2

Tôi đã có một vấn đề tương tự áp dụng _renderItem() trên một selector lớp nhưng giải quyết nó với

$.each($(".makeClass"), function(index, item) { 
     $(item).data("autocomplete")._renderItem = function (ul, item) { 
     return $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a>" + item.value + " - " + item.label + "</a>") 
       .appendTo(ul); 
     }; 
      }); 

Answer 3

Đối với tôi, những gì cố định nó đã được sử dụng appendTo tùy chọn từ jQuery UI AutoComplete.

Vấn đề của tôi là trường nhập này nằm trong một phương thức không được hiển thị lúc đầu. Ảnh hưởng đến nó để cha mẹ của đầu vào cố định vấn đề!

Answer 4

Tôi cũng có lỗi này. Điều này là lạ với id như selector _renderItem hoạt động chính xác. Tôi đã tìm thấy bản hack nhanh cho vấn đề này:

$.ui.autocomplete.prototype._renderItem = function (ul, item) {}