Bootstrap typeaheadとajax関数を使用していて、正しいJson結果形式を知り、Idと説明を返すために必要です。typeaheadで選択した要素をバインドするためにIdが必要ですmvc3モデル。
これはコードです:
[Html]
<input id="myTypeahead" class='ajax-typeahead' type="text" data-link="myUrl" data-provide="typeahead" />
[Javascript]
$('#myTypeahead').typeahead({
source: function (query, process) {
return $.ajax({
url: $('#myTypeahead').data('link'),
type: 'post',
data: { query: query },
dataType: 'json',
success: function (jsonResult) {
return typeof jsonResult == 'undefined' ? false : process(jsonResult);
}
});
}
});
This works properly when I return a simple list of strings, for example:
{item1, item2, item3}
But I want to return a list with Id, for example:
{
{Id: 1, value: item1},
{Id: 2, value: item2},
{Id: 3, value: item3}
}
この結果をajax "success:function()"で処理する方法は?
jquery Autocompleteを使用すると、Jsonオブジェクトリストを返すことができるので、非常に簡単です。
[jquery Autocomplete process data example]
...
success: function (data) {
response($.map(data, function (item) {
return { label: item.Id, value: item.Value, id: item.Id, data: item };
})
...
しかし、それはブーストラップTypeaheadでは機能しません。
誰か助けてもらえますか?
ありがとう。
私は2日間試してみましたが、ようやく機能しました。 Bootstrap Typeaheadは、デフォルトではオブジェクトの配列をサポートせず、文字列の配列のみをサポートします。 "matcher"、 "sorter"、 "updater"および "highlighter"関数は文字列を期待するためパラメータとして。
代わりに、「ブートストラップ」はカスタマイズ可能な「マッチャー」、「ソーター」、「アップデータ」、「ハイライター」機能をサポートしています。 Typeaheadオプションでこれらの関数を書き直すことができます。
IIはJson形式を使用し、Idを非表示のHTML入力にバインドしました。
コード:
$('#myTypeahead').typeahead({
source: function (query, process) {
return $.ajax({
url: $('#myTypeahead').data('link'),
type: 'post',
data: { query: query },
dataType: 'json',
success: function (result) {
var resultList = result.map(function (item) {
var aItem = { id: item.Id, name: item.Name };
return JSON.stringify(aItem);
});
return process(resultList);
}
});
},
matcher: function (obj) {
var item = JSON.parse(obj);
return ~item.name.toLowerCase().indexOf(this.query.toLowerCase())
},
sorter: function (items) {
var beginswith = [], caseSensitive = [], caseInsensitive = [], item;
while (aItem = items.shift()) {
var item = JSON.parse(aItem);
if (!item.name.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.Push(JSON.stringify(item));
else if (~item.name.indexOf(this.query)) caseSensitive.Push(JSON.stringify(item));
else caseInsensitive.Push(JSON.stringify(item));
}
return beginswith.concat(caseSensitive, caseInsensitive)
},
highlighter: function (obj) {
var item = JSON.parse(obj);
var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
return item.name.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
return '<strong>' + match + '</strong>'
})
},
updater: function (obj) {
var item = JSON.parse(obj);
$('#IdControl').attr('value', item.id);
return item.name;
}
});
注:@ EralpB`のコメント「これはまだこのタスクを達成するための最良の方法ですか?」を見ました
はい、@ Gonzaloソリューションは機能しますが、奇妙に見えます(特に松葉杖のようにjQuery-Autocompleteを使用した後)-「ボックスから」機能するはずです。これを使用することをお勧めします-- Bootstrap-3-Typeahead 。 Itsupports結果としてオブジェクトの配列:format-[{id :..、name:...}、...、{id:..、name:...}]。 OPの問題の例:
....
source: function (query, process) {
return $.ajax({
......
success: function (result) {
var resultList = [];
$.map(result,function (Id,value) {
var aItem = { id: Id, name: value};
resultList.Push(aItem);
});
return process(resultList);
}
});
},