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：我宁愿不在表格链接中嵌套表格。使用浮动跨度。