1次元配列で動作する次のスクリプトがあります。これを2次元配列で機能させることは可能ですか？次に、ページの2番目のボタンをクリックして、選択されたアイテムのIDが、選択されたアイテムのIDを表示する必要があります。
これは、1次元配列を使用したスクリプトです。
var $local_source = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"];
$("#txtAllowSearch").autocomplete({
source: $local_source
});
これは、IDをチェックするボタンのスクリプトです。これは不完全です。
$('#button').click(function() {
// alert($("#txtAllowSearch").someone_get_id_of_selected_item);
});
ui.item.label（テキスト）およびui.item.value（ID）プロパティを使用する必要があります
$('#selector').autocomplete({
source: url,
select: function (event, ui) {
$("#txtAllowSearch").val(ui.item.label); // display the selected text
$("#txtAllowSearchID").val(ui.item.value); // save selected id to hidden input
}
});
$('#button').click(function() {
alert($("#txtAllowSearchID").val()); // get the id from the hidden input
});
[編集]多次元配列の作成方法も質問されました...
次のように配列を作成できるはずです。
var $local_source = [[0,"c++"], [1,"java"], [2,"php"], [3,"coldfusion"],
[4,"javascript"], [5,"asp"], [6,"ruby"]];
多次元配列の操作方法について詳しくは、http ：//www.javascriptkit.com/javatutors/literal-notation2.shtmlをご覧ください。
jQueryオートコンプリートプラグインの[概要]タブから：
ローカルデータは、単純な文字列の配列にすることも、配列内の各項目のオブジェクトを、ラベルまたは値のプロパティ、あるいはその両方とともに含めることもできます。labelプロパティが提案メニューに表示されます。ユーザーがメニューから何かを選択した後、値が入力要素に挿入されます。1つのプロパティのみが指定されている場合、それは両方に使用されます。value-propertiesのみを指定すると、その値はラベルとしても使用されます。
したがって、「2次元」配列は次のようになります。
var $local_source = [{
value: 1,
label: "c++"
}, {
value: 2,
label: "java"
}, {
value: 3,
label: "php"
}, {
value: 4,
label: "coldfusion"
}, {
value: 5,
label: "javascript"
}, {
value: 6,
label: "asp"
}, {
value: 7,
label: "ruby"
}];
andを使用した引数を使用してfocus、selectイベント内のラベルと値のプロパティにアクセスできます。uiui.item.labelui.item.value
編集
テキストボックス内にID番号が配置されないように、フォーカスを「キャンセル」してイベントを選択する必要があるようです。そうしている間、代わりに隠れた変数の値をコピーすることができます。これが例です。
私のコードは、select関数に「returnfalse」を追加した場合にのみ機能しました。これがないと、入力はselect関数内で正しい値に設定され、select関数が終了した後にid値に設定されました。falseを返すと、この問題は解決しました。
$('#sistema_select').autocomplete({
minLength: 3,
source: <?php echo $lista_sistemas;?> ,
select: function (event, ui) {
$('#sistema_select').val(ui.item.label); // display the selected text
$('#sistema_select_id').val(ui.item.value); // save selected id to hidden input
return false;
},
change: function( event, ui ) {
$( "#sistema_select_id" ).val( ui.item? ui.item.value : 0 );
}
});
さらに、changeイベントに関数を追加しました。これは、ユーザーが入力に何かを書き込んだり、1つのアイテムが選択された後にアイテムラベルの一部を消去したりした場合、非表示フィールドを更新して、間違った（古い）ID。たとえば、私のソースが次の場合：
var $local_source = [
{value: 1, label: "c++"},
{value: 2, label: "java"}]
ユーザーがjaと入力し、オートコンプリートで「java」オプションを選択すると、値2が非表示フィールドに保存されます。ユーザーが「java」から文字を消去した場合、たとえば入力フィールドに「jva」が含まれる場合、ユーザーが値を変更したため、コードにID2を渡すことができません。この場合、idを0に設定しました。
他の誰かを助けることができる場合に備えて、私の側でうまくいったことを共有したいだけです。または、上記のPaty Lustosaの回答に基づいて、ソースメソッドにajaxアプローチを使用したこのサイトから派生した別のアプローチを追加させてください。
http://salman-w.blogspot.ca/2013/12/jquery-ui-autocomplete-examples.html#example-3
キッカーは、オートコンプリートフィールドに表示される結果セットを導出するphpスクリプト（以下のlisting.php）からの結果の「文字列」またはjson形式であり、次のようになります。
{"list":[
{"value": 1, "label": "abc"},
{"value": 2, "label": "def"},
{"value": 3, "label": "ghi"}
]}
次に、オートコンプリートメソッドのソース部分で：
source: function(request, response) {
$.getJSON("listing.php", {
term: request.term
}, function(data) {
var array = data.error ? [] : $.map(data.list, function(m) {
return {
label: m.label,
value: m.value
};
});
response(array);
});
},
select: function (event, ui) {
$("#autocomplete_field").val(ui.item.label); // display the selected text
$("#field_id").val(ui.item.value); // save selected id to hidden input
return false;
}
これがお役に立てば幸いです...
ソース配列内のオブジェクトにidプロパティがあると仮定します...
var $local_source = [
{ id: 1, value: "c++" },
{ id: 2, value: "java" },
{ id: 3, value: "php" },
{ id: 4, value: "coldfusion" },
{ id: 5, value: "javascript" },
{ id: 6, value: "asp" },
{ id: 7, value: "ruby" }];
現在のインスタンスを取得し、そのselectedItemプロパティを調べると、現在選択されているアイテムのプロパティを取得できます。この場合、選択したアイテムのIDを警告します。
$('#button').click(function() {
alert($("#txtAllowSearch").autocomplete("instance").selectedItem.id;
});
<script type="text/javascript">
$(function () {
$("#MyTextBox").autocomplete({
source: "MyDataFactory.ashx",
minLength: 2,
select: function (event, ui) {
$('#MyIdTextBox').val(ui.item.id);
return ui.item.label;
}
});
});
上記の応答は役に立ちましたが、私の実装では機能しませんでした。jQueryを使用して値を設定する代わりに、関数から選択オプションに値を返します。
MyDataFactory.ashxページには、Id、Label、Valueの3つのプロパティを持つクラスがあります。
リストをJavaScriptシリアライザーに渡し、応答を返します。
値とラベルのプロパティをハックしたり、非表示の入力フィールドを使用したり、イベントを抑制したりする必要はないと思います。各オートコンプリートオブジェクトに独自のカスタムプロパティを追加し、後でそのプロパティ値を読み取ることができます。
これが例です。
$(#yourInputTextBox).autocomplete({
source: function(request, response) {
// Do something with request.term (what was keyed in by the user).
// It could be an AJAX call or some search from local data.
// To keep this part short, I will do some search from local data.
// Let's assume we get some results immediately, where
// results is an array containing objects with some id and name.
var results = yourSearchClass.search(request.term);
// Populate the array that will be passed to the response callback.
var autocompleteObjects = [];
for (var i = 0; i < results.length; i++) {
var object = {
// Used by jQuery Autocomplete to show
// autocomplete suggestions as well as
// the text in yourInputTextBox upon selection.
// Assign them to a value that you want the user to see.
value: results[i].name;
label: results[i].name;
// Put our own custom id here.
// If you want to, you can even put the result object.
id: results[i].id;
};
autocompleteObjects.push(object);
}
// Invoke the response callback.
response(autocompleteObjects);
},
select: function(event, ui) {
// Retrieve your id here and do something with it.
console.log(ui.item.id);
}
});
ドキュメントには、labelプロパティとvalueプロパティを持つオブジェクトの配列を渡す必要があると記載されています。ただし、これら2つを超えるプロパティを持つオブジェクトを渡して、後で読み取ることはできます。
これが私が言及している関連部分です。
配列：配列はローカルデータに使用できます。サポートされている形式は2つあります。文字列の配列：["Choice1"、 "Choice2"]ラベルと値のプロパティを持つオブジェクトの配列：[{label： "Choice1"、value： "value1"}、...] labelプロパティが提案メニューに表示されます。ユーザーがアイテムを選択すると、値が入力要素に挿入されます。1つのプロパティのみが指定されている場合、そのプロパティは両方に使用されます。たとえば、値のプロパティのみを指定した場合、その値はラベルとしても使用されます。
ついに私はそれをしましたたくさんの友人に感謝します、そして 彼のコードのおかげで私はそれを適切に解決することができましたhttps://stackoverflow.com/users/87015/salman-a氏に特に感謝します。最後に、Groovy Grailsを使用しているので、コードは次のようになります。これが誰かに役立つことを願っています。
私のgspページではhtmlコードは次のようになります
<input id="populate-dropdown" name="nameofClient" type="text">
<input id="wilhaveid" name="idofclient" type="text">
スクリプト関数は私のgspページでは次のようになっています
<script>
$( "#populate-dropdown").on('input', function() {
$.ajax({
url:'autoCOmp',
data: {inputField: $("#populate-dropdown").val()},
success: function(resp){
$('#populate-dropdown').autocomplete({
source:resp,
select: function (event, ui) {
$("#populate-dropdown").val(ui.item.label);
$("#wilhaveid").val(ui.item.value);
return false;
}
})
}
});
});
</script>
そして私のコントローラーコードはこのようなものです
def autoCOmp(){
println(params)
def c = Client.createCriteria()
def results = c.list {
like("nameOfClient", params.inputField+"%")
}
def itemList = []
results.each{
itemList << [value:it.id,label:it.nameOfClient]
}
println(itemList)
render itemList as JSON
}
IDフィールドを非表示に設定していないもう1つの点は、最初は正確なIDを取得していることを確認していたため、非表示のままにしておくことができます。htmlの2番目の入力項目のテキストの代わりにtype=hiddenを配置するだけです。
ありがとう ！
ラベルテキストの代わりにテキストボックスに（値またはID）を表示する上記のコードを試しました。その後、event.preventDefault（）を試しましたが、完全に機能しています...
var e = [{"label":"PHP","value":"1"},{"label":"Java","value":"2"}]
$(".jquery-autocomplete").autocomplete({
source: e,select: function( event, ui ) {
event.preventDefault();
$('.jquery-autocomplete').val(ui.item.label);
console.log(ui.item.label);
console.log(ui.item.value);
}
});
これは、隠しフィールドを使用せずに実行できます。実行時にカスタム属性を作成するには、JQueryの機能を利用する必要があります。
('#selector').autocomplete({
source: url,
select: function (event, ui) {
$("#txtAllowSearch").val(ui.item.label); // display the selected text
$("#txtAllowSearch").attr('item_id',ui.item.value); // save selected id to hidden input
}
});
$('#button').click(function() {
alert($("#txtAllowSearch").attr('item_id')); // get the id from the hidden input
});
## HTML Code For Text Box and For Handling UserID use Hidden value ##
<div class="ui-widget">
@Html.TextBox("userName")
@Html.Hidden("userId")
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Jqueryスクリプト
$("#userName").autocomplete(
{
source: function (request,responce)
{
debugger
var Name = $("#userName").val();
$.ajax({
url: "/Dashboard/UserNames",
method: "POST",
contentType: "application/json",
data: JSON.stringify({
Name: Name
}),
dataType: 'json',
success: function (data) {
debugger
responce(data);
},
error: function (err) {
alert(err);
}
});
},
select: function (event, ui) {
$("#userName").val(ui.item.label); // display the selected text
$("#userId").val(ui.item.value); // save selected id to hidden input
return false;
}
})
label = u.person_full_name,
value = u.user_id