如何操縱jquery自動完成插件獲取id和值

使用這個jquery自動完成插件。爲自動完成數據格式是像下面如何操縱jquery自動完成插件獲取id和值

"name"=>"1" format.

我只是表示我的下拉列表中選擇產品的名稱，這是非常不安全的，以顯示產品的ID。但是當我提交時，我需要選擇產品的ID。對於這個我試着去給輸入文本字段屬性這樣

input type='text' name='product' productid=''

現在，當用戶選擇的任何產品，產品ID屬性應該得到這個值。如何去做這個

來源

2012-01-19 Krishna Deepak

你吃過看看[自定義數據和顯示（http://jqueryui.com/demos/autocomplete /＃定製數據）例如在jQueryUI文檔？ – Thorsten

我認爲你所追求的是select選項。

比方說，您的數據源是以下對象數組：

var data = [ 
    { 
     label: 'Product 1', 
     productid: '1' 
    }, 
    { 
     label: 'Product 2', 
     productid: '2' 
    },{ 
     label: 'Product 3', 
     productid: '1' 
    }];

默認情況下，插件會尋找標籤和值財產在你的對象（如果「值」丟失它將使用「標籤」）。

注意：如果您提供了一個值，當您在菜單中選擇建議的項目時，它將用於設置輸入的值！

所以我們的示例productid實際上不會直接用於插件，它不知道它，但我們將在事件處理程序參數ui.item中訪問它。

我會做的是添加一個隱藏的字段來存儲實際選定的值（而不是像你在你的問題中建議的屬性「productid」）。

<input type="hidden" id="productid" value="" />

JS代碼：

$("#myinput").autocomplete({ 
    source: data, 
    // the 'select' event is triggered when an item is selected in the menu 
    select: function(e, ui) { 
     $("#productid").val(ui.item.productid); 
     // if you want to add the "productid" attiubte 
     $(this).attr('productid', ui.item.productid); 
    } 
});

工作DEMO

來源

2012-01-19 13:21:33

其實我正在使用另一個插件，這是http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/的鏈接，但我工作在相同的路線，並使其工作。不管怎麼說，多謝拉。 –

實際上，來自bassistance的插件現在是jQuery UI Autocomplete小部件:-) –

如何操縱jquery自動完成插件獲取id和值

回答

相關問題