28

Jörn Zaefferer [ソース: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/]による jQuery Autocomplete v1.1 プラグインを特に参照しています。このプラグインにはかなりの数のバリエーションがあるようです。

オートコンプリートで提案を提供したいフィールドが複数あるため、ユーザーが入力を開始したときに追加のパラメーターをサーバーに渡そうとしています。

クエリに加えて、入力された名前属性をサーバーに送信したいのですが、extraParams 内で $(this).attr('name') を使用できないようです。

私のjQuery：

   $('.ajax-auto input').autocomplete('search.php', {
     extraParams: {
      search_type: function(){
       return $(this).attr('name');
      }
     }
   })

これは私の HTML です。

 <form method="post" action="#" id="update-form" autocomplete="off">
  <ol>
         <li class="ajax-auto">
             <label for="form-initials">Initials</label>
                <input type="text" id="form-initials" name="initials" />
            </li>
         <li class="ajax-auto">
             <label for="form-company">Company</label>
                <input type="text" id="form-company" name="company" />
            </li>
  </ol>
 </form>

助言がありますか？

4

13 に答える 13

47

jquery ui の一部となったオートコンプリート機能を使用しています。「extraParams」フィールドを渡しても機能しませんが、リクエスト クエリ文字列に値を追加するだけです。

$(document).ready(function() {
    src = 'http://domain.com/index.php';

    // Load the cities straight from the server, passing the country as an extra param
    $("#city_id").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: src,
                dataType: "json",
                data: {
                    term : request.term,
                    country_id : $("#country_id").val()
                },
                success: function(data) {
                    response(data);
                }
            });
        },
        min_length: 3,
        delay: 300
    });
});
于 2010-11-11T12:22:38.273 に答える
4

これを試して：

$('.ajax-auto input').setOptions({
  extraParams: {
    search_type: function(){
      return $(this).attr('name');
    }
  }
})

こちらもご覧ください

于 2010-09-07T13:27:33.403 に答える
2

私は同様の問題を抱えていました...それがあなたのために働くかどうかわかりません....

私は試した

 $("#awbCusName").autocomplete("getOracleCus.php?",{
  extraParams: {
  ZONE: function() { return $("#awbZone").val(); }, 
  SE: function() { return $("#awbSE").val(); }, 
  WSC: function() { return $("#awbWSC").val(); } 
 },
delay:200,
selectOnly:true,
cacheLength:0,
autoFill:true,
matchSubset:true,
minChars:1
});

CACHELENGTH:0 はトリックを行いました

ありがとう

于 2012-01-09T06:34:09.860 に答える
2

次のように、組み込みの jquery ui オートコンプリートを使用できます。

          $(function() {
         $("#BurroughName").autocomplete({
                minLength: 0,
                source: function( request, response) {
                            $.ajax({
                                        url: "/JsonData/GetBurroughFromSearchTermJson",
                                        dataType: "json",
                                        data: {
                                                    term: request.term,
                                                    CityId: $("#CityId").val()
                                        },
                                        success: function( data ) {
                                                    response( data );
                                        }
                            });
                },                  
                select: function( event, ui) {
                    $("#BurroughId").val(ui.item.id);

                    if (ui.item.id != null) {
                         var cityId = $('#CityId').val();
                        $.getJSON("/AdSales/City.mvc/GetCityJSONListFromBrand", { burroughId: ui.item.id }, function(data) {
                             $("#CityId").fillSelect(data);
                             var foo = $("#CityId option[value=" + cityId + "]");
                             if(($("#CityId option[value=" + cityId + "]").length > 0) && cityId != "")
                             {
                                 $("#CityId").val(cityId);
                             }
                        });
                    }
                    $('#burroughSpinner').fadeOut('slow', function(){});
                }
         });
     });

jsonp の例を次に示します: http://jqueryui.com/demos/autocomplete/#remote-jsonp

于 2011-12-23T05:52:30.563 に答える
1

理想的ではありませんが、プラグインをハッキング/変更して、プラグインが機能するようにしました。

簡単に言うと、プラグイン内の AJAX jQuery 関数を変更しました。

363 行目あたりに次のように表示されます。

        $.ajax({
            // try to leverage ajaxQueue plugin to abort previous requests
            mode: "abort",
            // limit abortion to this input
            port: "autocomplete" + input.name,
            dataType: options.dataType,
            url: options.url,
            data: $.extend({
                q: lastWord(term),
                search_type: $(input).attr('name'), // my mod to pickup multiple fields
                limit: options.max
            }, extraParams),
            success: function(data) {
                var parsed = options.parse && options.parse(data) || parse(data);
                cache.add(term, parsed);
                success(term, parsed);
            }
        });

私はまだこれに対するエレガントな解決策を探しているので、提案を続けてください。

于 2010-04-28T10:18:48.227 に答える
1

最も投票された回答に関しては、追加のリクエスト値をソース URL に追加するだけで、はるかに単純な構文があると思います。

これ：

$("#city_id").autocomplete({
    source: src+"?country_id="+$("#country_id").val().
    min_length: 3,
    delay: 300
});

以下と同じです:

$("#city_id").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: src,
            dataType: "json",
            data: {
                term : request.term,
                country_id : $("#country_id").val()
            },
            success: function(data) {
                response(data);
            }
        });
    },
    min_length: 3,
    delay: 300
});

src が URL 文字列であるとします。

于 2013-03-27T12:42:34.487 に答える
1

JQuery 1.7.something でオートコンプリートを使用する...

aspx データ グリッドの使用: 選択したレコードに対してオートコンプリートを実行する必要がありましたが、入力された値に基づいて異なるシード データを使用していました。オートコンプリート用のデータを取得するために、データ グリッドのレコードに表示されている他の 2 つのフィールドも必要でした。参照する必要があるすべてのフィールドには、独自のクラス名があります。

    $(".AutoSearch").autocomplete({
            DateTime: "",
            Maker: "",
            search: function (event, ui) {
                DateTime = $(this).parent().parent().parent().find(".DateTime").text();
                Maker = $(this).parent().parent().parent().find(".Maker").text();
            },
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "AutoList.aspx/GetListOfAutos",
                    data: "{ " +
                        "'DateTime': '" + DateTime + "', " +
                        "'Maker': '" + Maker + "', " +
                        "'SearchSeed': '" + request.term + "', " +
                        "'NumberToRetrieve': '" + 100 + "'" +
                    " }",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.Description,
                                value: item.Number
                            }
                        }));
                    },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("There was an error retrieving the Data.");
                    }
                });
            },
            change: function (event, ui) {
                $(this).parent().parent().parent().parent().parent().parent().css("background-color", "#EEC900");
                $(this).parent().parent().parent().parent().parent().parent().find(".chkReadyExport").find("input:checkbox").prop("checked", false);
            },
            select: function (event, ui) {
                this.value = ui.item.value;
                return false;
            },
            minlength: 6,
            open: function () {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function () {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        });
    }

2 つのプロパティを追加しました。DateTime と Maker を使用し、次に search: を使用すると、オートコンプリートが発生する前に発生します source: 私がいた行から必要なデータを取得できました。これにより、すべての検索項目と追加のデータ項目をすべて 1 か所にまとめておくことができました。

.parent().parent() などは、グリッドビューにデータを表示する複数行のテーブルがあり、ツリーを上に移動して、探しているテキスト ボックスまたはラベルを見つけて変更する必要があるためです。データが変更された行の背景色。私はjQueryでアイテムを見つけることにまだ慣れていないため、parent.parent ...のことです。

于 2013-03-15T21:41:50.260 に答える
1 
jQuery( "#jac" ).autocomplete({
    source: autocompleteURL,
    minLength: 2,
    search: function( event, ui ) { 

        // update source url by adding new GET params
        $(this).autocomplete( 'option', 'source', autocompleteURL + 'var1=aaa&var2=bbb' );
    }
})

jquery.ui.autocomplete 1.8.17 で動作します

于 2012-07-26T16:07:01.117 に答える
0

最初に.eachを使用してから、$（this）を使用して、必要なものを変数に設定できます。結果の変数はオートコンプリートで使用できます

$(".autosuggest").each(function (index, object) {
    var autosuggestType = $(this).attr("autoSuggestType");
    $(this).autocomplete("url",
            {                    
                extraParams: {
                    autoSuggestType: autosuggestType
                },
于 2011-05-17T12:57:43.163 に答える
0

私は同じ問題を抱えていましたが、奇妙なことに、オートコンプリート プラグインの縮小版のみでした。縮小されていないバージョンを使用すると、機能します。違いが何であるかを確認するために、縮小版をまだ見ていません。

于 2011-06-06T20:58:16.767 に答える
0

なぜ機能しないのかわかりません。

ただし、最初に の値を確認/デバッグできます$(this).attr('name')。

また、[オプション] タブで説明されているように、 Firebugで問題を解決するのに役立つ ajax ポスト リクエスト (URL とそのデータ) を確認できます。

于 2010-04-28T09:07:40.877 に答える