如何通过jquery ui的自动完成显示一项值答案

【问题标题】：How to show one item value with autocomplete from jquery ui如何通过jquery ui的自动完成显示一项值
【发布时间】：2012-06-16 20:14:13
【问题描述】：

我正在开发一个输入文本搜索，使用 post 获取数据的自动完成功能：

$('#name_search').autocomplete({
  source: "search/name.php",
  open: function(){
     $(this).autocomplete('widget').css('z-index', 1000);
        return false;
  }}).data( "autocomplete" )._renderItem = function( ul, item ){
     return $( "<li></li>" )
     .data( "item.autocomplete", item )
     .append( "<a>" + item.nome + "<br>" + item.cognome + "</a>" )
     .appendTo( ul );
};

它向我显示了小部件行内的两个项目，但是当我单击它时，它会自行关闭并清除输入文本中的文本。我该怎么办？

【问题讨论】：

标签： jquery search input autocomplete onclick

【解决方案1】：

使用自动完成的 select 方法来定义目标输入元素的值。

    $('#name_search').autocomplete({
           source: "search/name.php",
           open: function(){
                  $(this).autocomplete('widget').css('z-index', 1000);
                  return false;
            },
            select:function(event, ui){
                $(this).val(ui.item.label);
            }
      }).data( "autocomplete" )._renderItem = function( ul, item ){
     return $( "<li></li>" )
     .data( "item.autocomplete", item )
     .append( "<a>" + item.nome + "<br>" + item.cognome + "</a>" )
     .appendTo( ul );
};

来源：

jquery ui 自动补全方法http://jqueryui.com/demos/autocomplete/#event-select

【讨论】：

什么都没有改变......当我点击小部件时，输入标签内的文本不会成为点击的文本，但它会被清除
你可以在 select 方法中做 console.log(ui) 并发布返回的内容吗？

【解决方案2】：

我解决了在 select 函数中添加 return false 的问题：

$('#name_search').autocomplete({
            source: "search/name.php",
            open: function(){
                $(this).autocomplete('widget').css('z-index', 1000);
                    return false;
            },
            select:function(event, ui){
                $(this).val(ui.item.nome+" - "+ui.item.cognome);
                return false;
            }
            }).data( "autocomplete" )._renderItem = function( ul, item ){
                return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.nome + "<br>" + item.cognome + "</a>" )
                .appendTo( ul );
            };

【讨论】：