如何獲得JQuery UI自動完成與項目ID的工作

Question

我在這裏看到這個職位：jQuery UI autocomplete with item and id但我無法弄清楚事情。

這裏是我的輸入HTML：

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

這裏是我的Ajax調用：

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

      }); 

如何設定的ID，我應該傳遞一個二維數組到源代碼？當我給源代碼只是文本，然後ui.item.value = ui.item.label =「任何文本」。我不知道如何附加ID。

請問我能否得到一些幫助。感謝

Answer 1

從fine manual：

本地數據可以是字符串的簡單陣列，或者它包含對象的陣列中的每個項目，與任一標籤或屬性值或兩者。標籤屬性顯示在建議菜單中。在用戶從菜單中選擇一些內容後，該值將被插入到輸入元素中。

所以label雲在下拉菜單和value進入<input type="text">和你想要的東西有點不同，要在<input type="text">和菜單一兩件事，在一個單獨的<input type="hidden">另一件事。

假設你有一個像從你的服務器這一回一些原始數據：

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陣列將給予：

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

然後，你可以建立一個數組，一個簡單的映射對象.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

你不需要的映射。您可以將自定義屬性設置爲源數組中的對象。屬性「標籤」和「值」是保留的。然後，可以通過事件處理程序中的ui.item.id訪問自定義屬性（如「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); 

    }