1

BootstrapTypeaheadとAjaxを使用して特定の「オートコンプリート」を構築しています。

私のコードは次のようになります。

searchInput.typeahead({
    source: function (request, response) {
        $.ajax({
            url: '/Home/AllNamesAutoComplete',
            type: 'post',
            dataType: 'json',
            data: { searchText: searchInput.val() },
            success: function (data) {
                var arr = [];
                $.each(data.AutoCompleteItemViewModel, function () {
                    arr.push(this.Name + " - <span>" + this.Position + "</span>");
                });
                return response(arr);
            }
        })
    },
    items: 6
});

プッシュでは、2つの異なる値を渡します：this.Nameとthis.Position。

すべて正常に機能しますがS、最初の文字として「」と入力すると、もレンダリング<span>されます。文字列をHTMLとしてプッシュしたいのですが、それを行う方法がまだわかりません。

もう1つは、ユーザーがオートコンプリートのアイテムをクリックしたときに、Nameとではなく、とNameだけを選択したいということですPosition。

Typeaheadのソースの配列にHTMLを配置し、クリックすると、メイン入力に特定の値のみをレンダリングし、両方をレンダリングしたくありません。

「文字列の代わりにオブジェクトを取得するためにブートストラップタイプアヘッドを拡張する」を確認しましたが、Backboneを使用しているため理解できません。

4

3 に答える 3

2

ここでつまずいた人の質問のタイトルに答えるために。これは、Bootstrap プラグインを拡張する方法です。(はい、私はタイトルよりも多くを読みました)

(function ($, app) {

    var Typeahead = $.fn.typeahead.Constructor;
    Typeahead.extend = app.extend;

    app.YourCustomTypeahead = Typeahead.extend({
        highlighter: function (items) {
            // proof that it's working
            console.log('custom highlighter');
            // to call the parent just do this
            return Typeahead.prototype.highlighter.apply(this, arguments);
        }
    });

}(window.jQuery, window.YourProjectNamespace));

使用法：

var typeahead = new app.YourCustomTypeahead($('selector'), { /* options */ });

この例app.extendでは、Backbone で使用されるような一般的な拡張機能があります。

すなわち。(以下はアンダースコアが必要です)

(function (app, $) {

    // Backbone's extend function
    app.extend = function(protoProps, staticProps) {

        var parent = this;
        var child;

        // The constructor function for the new subclass is either defined by you
        // (the "constructor" property in your `extend` definition), or defaulted
        // by us to simply call the parent's constructor.
        if (protoProps && _.has(protoProps, 'constructor')) {
          child = protoProps.constructor;
        } else {
          child = function(){ return parent.apply(this, arguments); };
        }

        // Add static properties to the constructor function, if supplied.
        _.extend(child, parent, staticProps);

        // Set the prototype chain to inherit from `parent`, without calling
        // `parent`'s constructor function.
        var Surrogate = function(){ this.constructor = child; };
        Surrogate.prototype = parent.prototype;
        child.prototype = new Surrogate;

        // Add prototype properties (instance properties) to the subclass,
        // if supplied.
        if (protoProps) _.extend(child.prototype, protoProps);

        // Set a convenience property in case the parent's prototype is needed
        // later.
        child.__super__ = parent.prototype;

        return child;
    };

}(window.YourProjectNamespace, window.jQuery));
于 2013-04-30T14:35:08.670 に答える
1

jQuery を使用して文字列を HTML に変換できます。

html = $('<div>hello</div>')[0]

Typeahead のソース関数は、文字列の配列のみを想定しています。これらの文字列の出力を変更するには、ハイライター関数の追加を検討してください。ハイライター関数は item 引数を受け取り、HTML を返す必要があります。

searchInput.typeahead({
  source: function(request, response){
  ...
    arr.push({Name:this.Name, Position:this.Position});
  ...
  },
  highlighter: function(item){
    return "<div>"+item.Name+" - <span>"+item.Position+"<span></div>"
  },
  matcher: function(item){
    return item.Name.indexOf(this.query) > -1;
  },
  sorter: function(items){
    return items;
  },
  items:6
});

編集:ソースが文字列ではなくオブジェクトの配列で応答を呼び出すように、いくつかの変更を加えました。出力 html のフォーマットは、ハイライター関数で行う必要があります。マッチャーは、クエリと比較するためにオブジェクト内のプロパティを見つけることができる必要があります。先行入力がソース内の文字列をソートしようとするときのエラーを防ぐために、Sorter もオーバーライドする必要があります。

于 2012-10-04T06:54:13.647 に答える
0

独自の「マッチャー」メソッドを作成する必要があると思います。オリジナルの方法をベースとして使用できます。元のメソッドは、ここで読むことができる「〜」演算子（私はそれを知りませんでした）を利用します。

searchInput.typeahead({
  ...
  matcher: function(item){
    // maybe some ugly solution to remove <span> markup
  },
  ...
});
于 2012-10-04T17:45:49.227 に答える