1

オートコンプリートを備えた単純なテキスト入力があります。

<input type="text" class="span4" id="autoc1" name="agent" value="">

次のjqueryコードを使用して、オートコンプリートを実行し、データを戻しています。次に、ワンクリックで、返されたデータで2つの入力を埋めたいと思います。オートコンプリートが設定された実際のフィールドを除いて、すべてが正常に機能します。

Jクエリ:

$(function() {
    // input id of field with autoc on        
    $( "#autoc1" ).autocomplete({

        // php mysql data get
        source: "/pages/includes/getAgent.php",            
        minLength: 2,

        select: function( event, ui ) {
            //alert(ui.item.agent_name); //  shows correct info, here only to test

            //tried $(this) as below - didn't work
            //$(this).val(ui.item.agent_name);

              $('#autoc1').val(ui.item.agent_name); //  tried with and without this, didn't work
              $('#comm').val(ui.item.commission_percent); // this works perfectly!!
        }
    }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li>" )
        .append( "<a>" + item.agent_name + "</a>" )
        .click(function(){$('#autoc1').val(item.agent_name)}) // added this. didn't work
        .appendTo( ul );
    };
});

これは、役立つ場合に返される JSON です。

[{"0":"agent a","agent_name":"agent a","1":"15","commission_percent":"15"},
{"0":"agent b","agent_name":"agent b","1":"10","commission_percent":"10"}]

完全にアイデアが不足しています！

編集

より多くの html、その基本的なフォーム、シンプル

<form class="add_booking" method="post">

    <input type="text" placeholder="Date" class="span2" id="datepicker" name="date" value="<?=$showDate?>">

    <input type="text" placeholder="Booking Agent" class="span4 here" id="autoc1" name="agent" value="<?=$ds['agent']?>">

    <input type="text" placeholder="15" class="span1" name="commission" id="comm" value="<?=$ds['show_comm_percent']?>">%

etc etc </form>
4

1 に答える 1

1

あなたがやっているコードの部分で：

data( "ui-autocomplete" )._renderItem

jQuery のオートコンプリートの内部データと関数をいじっています。あなたはそれをすべきではありません。

機能しない理由は、無効なものをオートコンプリートに渡しているためだと思います:

次の 2 つの形式がサポートされています。

ただし、カスタム データを渡しています。これを行うには (オートコンプリート自体の関数に干渉することなく)、関数データ ソースを使用する必要があります。

Function: The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete. The callback gets two arguments:
A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".
A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

与えられた例は次のとおりです。

$( "#autocomplete" ).autocomplete({
  source: function( request, response ) {
          var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
          response( $.grep( tags, function( item ){
              return matcher.test( item );
          }) );
      }
});

サーバーからデータを取得しているため、サーバーへの ajax 呼び出しを行っている間は応答関数を保存し、データが返されたときにそれを呼び出す必要があります。

ただし、カスタム データ フォーマットを使用して内部関数をオーバーライドするときにバージョンを使用し続けたい場合は、それを機能させるためreturn falseに select 関数に追加できます。

select: function( event, ui ) {
    $('#autoc1').val(ui.item.agent_name); //  tried with and without this, didn't work
    $('#comm').val(ui.item.commission_percent); // this works perfectly!!
    return false;
}

これが機能する理由は、フィールドの値を手動で設定しているためです。 false を返すと、オートコンプリートがフィールド自体の値を設定しようとするのを停止します (フィールドを何に設定すればよいか分からないため失敗します)。

私が知っている理由は、ユーザーが値を選択した後にEnterキーを押したかのように、アプリでオートコンプリートが選択した値を自動的に送信するようにしたかったからです。その方法は次のとおりです。

autocompleteSelect: function(event, suggestItems){
    var suggestItem = suggestItems.item;
    $(this.element).find('.tagInput').val(suggestItem.value);
    $(this.element).find('.tagInput').blur(); //This triggers the onchange function elsewhere
    $(this.element).find('.tagInput').val("");
    event.stopPropagation();
    return false;
},
于 2013-03-29T20:17:26.213 に答える