14

私はajax関数でBootstraptypeaheadを使用しており、IDと説明を返すために正しいJson結果形式が何であるかを知りたいです。先に選択した要素をmvc3モデルにバインドするためのIDが必要です。

これはコードです：

    [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（）」で処理するにはどうすればよいですか？

Jsonオブジェクトリストを返すことができるので、 jqueryオートコンプリートを使用すると非常に簡単です。

[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では機能しません。

誰か助けてもらえますか？

ありがとう。

4

2 に答える 2

41

私は2日間試してみましたが、ようやくうまくいくようになりました。Bootstrap Typeaheadは、デフォルトではオブジェクトの配列をサポートせず、文字列の配列のみをサポートします。「matcher」、「sorter」、「updater」、および「highlighter」関数は、パラメーターとして文字列を想定しているためです。

代わりに、「Bootstrap」は、カスタマイズ可能な「マッチャー」、「ソーター」、「アップデーター」、および「ハイライター」機能をサポートします。したがって、これらの関数を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;
    }
});
于 2013-02-19T14:03:49.267 に答える
1

注：@ EralpBのコメント「これはまだこのタスクを実行するための最良の方法ですか？」を見ました。

はい、@ Gonzaloソリューションは機能しますが、奇妙に見えます（松葉杖のように、特にjQuery-Autocompleteを使用した後）-「ボックスから」機能するはずです。これを使用することをお勧めします-Bootstrap-3-Typeahead。結果としてオブジェクトの配列をサポートします：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);
        }
    });
  },
于 2015-09-21T14:38:21.643 に答える