JQuery UIの入手方法アイテムIDを使ったオートコンプリート作業

Question

私はここにこの投稿を見ました：jQuery UI autocomplete with item and id私は物事を把握することができませんでした。ここ

私の入力HTMLです：

var data = {}; 
$.get('/tags',data, function(tag_list) { 
       autocomplete_source_list = []; 

       for(var i = 0; i < tag_list.length; i++){ 
        autocomplete_source_list.push([tag_list[i].fields.display_name, [2,3,4,5,6,7,8,9,1,2]]); 
       } 
       jQuery(".tags").autocomplete({ 
        source: autocomplete_source_list, 
        select: function (event, ui) { 
         $(".tags").val(ui.item.label); // display the selected text 
         $(".tags_id").val(ui.item.value); // save selected id to hidden input 
         console.log("selected id: ", ui.item.label) 
        } 
       }); 

      }); 

私はソースにする2D配列を渡す必要があり、私はIDを設定するにはどうすればよい：

<input type="text" class="tags" style="width:250px; height:24px;"> </input>' 
<input type="hidden" name="tags_id" id="tags_id" /> 

ここでは私のAJAX呼び出しがありますか？ソースをテキストだけにすると、両方のui.item.value = ui.item.label = "任意のテキスト"となります。私はどのようにIDを付けることができないのか分かりません。

助けてもらえますか？おかげfine manualから

Answer 1

：

ローカルデータは、文字列の単純な配列にすることができ、またはそれは、ラベルまたは値のプロパティのいずれかまたは両方と、アレイ内の各項目のオブジェクトが含まれています。ラベルプロパティは、提案メニューに表示されます。値は、ユーザーがメニューから何かを選択した後に入力要素に挿入されます。

のでlabelは、ドロップダウンメニューに行くとvalueが<input type="text">になり、あなたは少し違う何かをしたい、あなたは別の<input type="hidden">で<input type="text">とメニューと別の事で一つのことをしたいです。

は、サーバーからこのバックのようないくつかの生のデータを得たとします

var raw = [ 
    { value: 1, label: 'one' }, 
    { value: 2, label: 'two' }, 
    { value: 3, label: 'three' }, 
    { value: 4, label: 'four' } 
]; 

次にあなたがアレイと、単純なマッピングオブジェクトを構築することができ：

var source = [ ]; 
var mapping = { }; 
for(var i = 0; i < raw.length; ++i) { 
    source.push(raw[i].label); 
    mapping[raw[i].label] = raw[i].value; 
} 

source配列はに与えられるであろう.autocomplete()とselectハンドラはmappingを使用して、何を<input type="hidden">に入れるのかを把握します。

$('.tags').autocomplete({ 
    source: source, 
    select: function(event, ui) { 
     $('.tags_id').val(mapping[ui.item.value]); 
    } 
}); 

デモ：http://jsfiddle.net/ambiguous/GVPPy/

Answer 2

あなたは、マッピングは必要ありません。ソース配列内のオブジェクトにカスタム属性を設定できます。属性 "label"と "value"は予約されています。次に、 "id"などのカスタム属性には、イベントハンドラのui.item.idからアクセスできます。

$("#input_id").autocomplete({ 
    source:function(request, response){ 
    $.ajax({ 
     url: "/api/autocomplete", 
     type: "POST", 
     dataType: "json", 
     data: { term: request.term }, 
     success: function(responseData){ 
      var array = responseData.map(function(element) { 
       return {value: element['name'], id: element['id']}; 
      }); 
      response(array); 
     } 
    }) 
    select: function(event, ui) { 
     var name = ui.item.value; 
     var id = ui.item.id; 
     ... 

Answer 3

これを試してみてください。

オートコンプリート機能：

$(function() {    

    $("#firm_name").autocomplete({  
      source:'/autocomplete_firm_name', //url 

      select: function(event, ui) { 
       // Where to used 
        $("#firm-name").val(ui.item.value); 
        $("#firm-id").val(ui.item.id);      
        return false; 
       } 
    }); //autocomplete 
});  //function 

PHPスクリプト（autocomplete_firm_name）であなたのコード：

public function autocomplete_firm_name() { 

extract($_GET); 
     // $term variable contend your serach value 
     // Execute your sql query here  

    $datas=array(); 
     if($query->num_rows() > 0){ 
      foreach ($query->result() as $row) 
      { 
       $data=array(); 
         $data['id']=$row->firm_id; 
         $data['label']=$row->firm_name; 
         $data['value']=$row->firm_name; 
         $datas[]=$data; 
      } 
      } 

      echo json_encode($datas); 

    } 

を