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

Question

我正在开发一个输入文本搜索，使用 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 );
};

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

Answer 1

我解决了在选择函数中添加 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 );
            };

Answer 2

使用自动完成的 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