jQuery uiオートコンプリート他の関数で選択項目を取得

Question

jQueryオートコンプリートに問題がありますが、入力の値を取得しようとしましたが、ラベルは取得できますが値は取得されません。

var listeClients = [{"value":1,"label":"Orange"},{"value":2,"label":"Blue"}]; 
    $("#site_client_first").autocomplete({ 
    source: listeClients, 
    select: function (event, ui) { 
     $("#site_client_first").val(ui.item.label); 
     return false; 
    } 

そして、私が使用して値を取得のための：値を取得する方法

$("#site_client_first").val(); 

https://jsfiddle.net/fyz8vL3a/

を？

事前による感謝=）

Answer 1

オートコンプリートの選択イベントで、あなたは、要素の値プロパティとしてラベルを設定している#site_client_firstすなわち、ここで$（ "＃のsite_client_first"）。valを（ui.item.label） 。したがって、$（ "＃site_client_first"）。val（）を代入してスパンのinnerHTMLを設定しようとすると、item.valueではなくラベルが常に得られます。

以下のコードを試してください。 $（ "＃site_client_first"）に属性 'itemValue'を追加しました。これはアイテムの値と$（ "＃site_client_first"）を保持します。val（）はアイテムのラベルを保持します。

スパンinnerhtmlを設定するときは、アイテムの値である$（ "＃site_client_first"）。attr（ "itemValue"）を割り当てます。

<input class="form-control" name="site[client]" id="site_client_first" itemValue="100" /> 

HTML変更で上記の行に変更を加えます。 あなたの最終的なHTMLはbelowsの通りです：

<input class="form-control" name="site[client]" id="site_client_first" itemValue="100" /> 
<button onclick="getValue()">Get</button> 
<span id="svalue"></span> 

スクリプトはここに行く：

$(document).ready(function() { 
var listeClients = [{ "value": 1, "label": "Orange"}, { 
"value": 2, 
"label": "Blue" 
}]; 

$("#site_client_first").autocomplete({ 
source: listeClients, 
select: function(event, ui) { 
    $("#site_client_first").val(ui.item.label); 
    $("#site_client_first").attr("itemValue", ui.item.value); 
    return false; 
} 
}); 

}) 

var getValue = function() { 
document.getElementById("value").innerHTML = $("#site_client_first").attr("itemValue"); 
} 

function getValue() { 
document.getElementById("value").innerHTML = $("#site_client_first").attr("itemValue"); 
}  

Answer 2

問題は、あなたがselect要素としてinput要素を使用しようとしているです。

selectの場合とは異なり、inputの値は単純に書き込まれた値です。

autocompleteプラグインのデフォルトの動作では、提案として与えられたsourceのlabelsを表示することで、あなたはそのうち1つを選択すると、それはinputで対応するvalueを設定します。あなたはinputのvalueとしてlabelを設定することにより、以下のコードでは、この機能をオーバーライドしている：

select: function (event, ui) { 
    $("#site_client_first").val(ui.item.label); 
    return false; 
} 

あなたは上記のコードの一部を削除した場合、あなたはvalueフィールドが書き込まれることに気付くだろうinput要素をオプションの選択時に指定します。

ソリューション1

私はselect 1であなたのinputエレメント交換をお勧めします。私はあなたのニーズに合っていると思います。オプションを検索する必要がある場合は、chosenまたはselect2のようなプラグインを使用します。あなたはautocompleteとinputを使用してに熱心なら

ソリューション2

は、

select: function (event, ui) { 
    $("#site_client_first").val(ui.item.label); // what the user sees 
    $("#site_client_first").attr('data-realValue', ui.item.value); // value is hidden 
    return false; 
} 

あなたは

を使用して値を取り出すことができ selectコールバックで余分な属性として値を設定します

$("#site_client_first").attr('data-realValue'); 

デモ：https://jsfiddle.net/fyz8vL3a/1/