0

オートコンプリートは初めてです。API呼び出しからデータを取得し、それをソースとして設定して、基本レベルでオートコンプリートを機能させることができます。しかし、値を選択するときは、次のこともできるようにしたいと思います。

  1. テキスト入力値をソースの値にしながら、テキスト入力にラベルを表示します。
  2. 他の入力を自動的に入力します。

たとえば、次のIDを持つ3つの入力ボックスがあります：customer、customer_number、customer_representative。次のjson形式でデータを返すAPIがあります。

{"request":
   {"request_type":"whatever",
   "response":[
   {
      "customer_id":"123456",
      "customer_name":"TEST CUSTOMER",
      "customer_account":"ABC987",
      "customer_rep_id":"567",
       "customer_rep_id":"John Smith",
   }
   ]

   }
}

これまでの私のコードは次のとおりです。

var url = [API URL W/ PARAMS];
$.getJSON(url, function(data) 
{       
    var src = [];
    $.each(data.response, function(index, value) {
        var customer= data.response[index]['customer_name'];
        src.push(customer);
    });     

    $( "#customer" ).autocomplete({
        source: src
    });
}

これにより、顧客入力ボックスのオートコンプリートが有効になりますが、値は顧客名と同じです。公式ドキュメント（http://api.jqueryui.com/autocomplete/）を読んだ後、select（event、ui）を使用して少なくとも他の2つの入力ボックスにデータを入力できるはずですが、私はどのように途方に暮れて。

どんな助けでも大歓迎です。

4

2 に答える 2

0

少し遊んだ後、ついに私の脳の中でカチッという音がしました。両方を実現するために、取得したい追加の値を含む多次元配列をソースに作成し、コールバック関数を追加して、入力したい他のフィールドにデータを入力しました。

    var src = [];
     $.each(data.response, function(index, value) {
    var customer= data.response[index]['customer_name'];

     //Also retrieve other values that I want to use
     var customer_id= data.response[index]['customer_id'];
     var customer_rep_id= data.response[index]['customer_rep_id'];
     var customer_rep_name= data.response[index]['customer_rep_name'];

    //Make this a multi array
    src.push({label: customer, value:customer_id, rep_id = customer_rep_id, rep = customer_rep_name });
});   

//Added a callback function
$( "#customer" ).autocomplete({
    source: src,
    select: AutoCompleteSelectHandler
});


//This function auto-populates other inputs
function AutoCompleteSelectHandler(event, ui) { 
    //Populate rep box
    $("#customer_representative").val(ui.item.customer_rep_name);
 }
于 2013-01-07T23:47:19.540 に答える
0

軽量のDevBridgejQueryオートコンプリートをチェックアウト：https ：//github.com/devbridge/jQuery-Autocomplete

提案とともに任意のデータを渡し、それに応じて値を処理するようにonSelectコールバックを設定できます。

于 2013-01-08T00:09:52.743 に答える