jquery - jquery uiからオートコンプリートで1つのアイテム値を表示する方法

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 );
};

ウィジェットの行内に2つのアイテムが表示されますが、それをクリックすると、それ自体が閉じて入力テキスト内のテキストがクリアされます..どうすればよいですか?

Answer 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 );
};

ソース：

jqueryuiオートコンプリートメソッド http://jqueryui.com/demos/autocomplete/#event-select

Answer 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 );
            };