jquery自動完成不顯示文本框中的選定值

Question

我正在創建一個使用jquery自動完成的搜索欄。

這裏是我的自動完成代碼：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(function() { 
      $(".txtSearch").autocomplete(
      { 
       source: function (request, response) { 
        $.ajax({ 
         url: '@Url.Action("AutoComplete", "components")', 
         type: "GET", 
         data: request, 
         success: function (data) { 
          response($.map(data, function (el) { 
           return { 
            label: el.autoSuggest, 
            value: el.resultCount 
           }; 
          })); 
         } 
        }); 
       }, 
       minLength: 3, 
       select: function (event, ui) { 
        $(this).val(ui.item.label); 
        var values = ui.item.label; 
        $.ajax({ 
         type: 'GET', 
         contentType: 'application/json', 
         cache: false, 
         url: '@Url.Action("SearchFunc", "components")', 
         dataType: 'json', 
         data: { searchTerm: values } 
        }).done(function (result) { 

         window.location.href = "search.aspx?pass=" + encodeURIComponent(result); 
        }) 
       } 
      }).data("ui-autocomplete")._renderItem = function (ul, item) { 
       return $("<li></li>") 
      .data("ui-autocomplete-item", item) 
      .append("<a><table width='100%'><tr><td><strong>" + item.label + "</strong></td><td align='right' style='font-size: 10px;'>" + item.value + "</td></tr></table></a>") 
      .appendTo(ul); 
      }; 
     }); 
    }); 
</script> 

例如，如果有人開始輸入「市」，自動完成顯示輸出是這樣的：

shirts  2results 
tshirts  3results 

我的問題是，當我選擇任何汽車 - 推薦選項，文本框只顯示值，而不顯示標籤。

例如在上述情況下，如果我選擇襯衫，文本框顯示2件結果。 但我的第二個Ajax函數傳遞的參數是正確的，即襯衫

任何人都可以提出解決方案嗎？

Answer 1

我終於解決了這個問題（謝謝Salman A :)）。下面是我做的：

我已經添加在select事件event.preventDefault（）由薩爾曼

我也開始加入了焦點事件的建議。

所以最後的代碼是：當我選擇的自動建議的任何一個，即，當我在任何自我暗示單擊，文本框顯示標籤

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(function() { 
      $(".txtSearch").autocomplete(
      { 
       source: function (request, response) { 
        $.ajax({ 
         url: '@Url.Action("AutoComplete", "components")', 
         type: "GET", 
         data: request, 
         success: function (data) { 
          response($.map(data, function (el) { 
           return { 
            label: el.autoSuggest, 
            value: el.resultCount 
           }; 
          })); 
         } 
        }); 
       }, 
       minLength: 3, 
       focus: function (event, ui) { 
        event.preventDefault(); 
        $(this).val(ui.item.label); 
       }, 
       select: function (event, ui) { 
        event.preventDefault(); 
        $(this).val(ui.item.label); 
        var values = ui.item.label; 
        $.ajax({ 
         type: 'GET', 
         contentType: 'application/json', 
         cache: false, 
         url: '@Url.Action("SearchFunc", "components")', 
         dataType: 'json', 
         data: { searchTerm: values } 
        }).done(function (result) { 
         if (result == null || result == "") { 
          result = 0; 
         } 

         window.location.href = "search.aspx?pass=" + encodeURIComponent(result); 
        }) 
       } 
      }).data("ui-autocomplete")._renderItem = function (ul, item) { 
       return $("<li></li>") 
      .data("ui-autocomplete-item", item) 
      .append("<a><table width='100%'><tr><td><strong>" + item.label + "</strong></td><td align='right' style='font-size: 10px;'>" + item.value + "</td></tr></table></a>") 
      .appendTo(ul); 
      }; 
     }); 
    }); 
</script> 

Answer 2

我認爲您需要取消在選擇事件的默認操作：

select: function (event, ui) { 
    event.preventDefault(); 
    $(this).val(ui.item.label); 
    // rest of code 

如果不取消選擇事件，jQuery用戶界面將覆蓋與該項目的值文本框中的文本。 PS：我寧願不在表格鏈接中嵌套表格。使用浮動跨度。