1

ユーザーが入力する郵便番号テキストボックスから、JQuery Autocompleteを使用してテキストボックスにオートコンプリートされた都市名を表示しようとしています。

City テキストボックスのオートコンプリートは、コントロールにフォーカスすることでトリガーする必要があります。しかし、オートコンプリートされた都市を表示するには、下キーを押す必要があります。さらに、郵便番号のテキストボックスの値を変更すると、オートコンプリートにより、最後に一致した都市が最初に表示されます。これらの問題を解決するために私が何をすべきか知っている人はいますか?

これが私のコードです。まず、ビュー:

<script type="text/javascript">
$(function () {
    $('#PostalCode').blur(function () {
        $.getJSON("http://xxxxxxxxx/Cities/GetCities", { strPostalCode: $('#PostalCode').val() }, function (data) {
            $("#autocompCities").autocomplete({
                minLength: 0,
                source: data
            }).focus(function () {
                $(this).autocomplete("search", "");
            });
        });
    });
});

...

@Html.TextBoxFor(model => model.PostalCode)
@Html.TextBoxFor(model => model.City, new { id = "autocompCities" })

そして、私のコントローラーで：

public JsonResult GetCities(string strPostalCode)
{
//retrieving data
var cities = from city in allCities
                     where city.Id == strPostalCode
                     select city.Name;

        return Json(cities, JsonRequestBehavior.AllowGet);
}

参考までに、「Url.Action」を使用して生成されたルートが、global.asax ファイルにマッピングされたルートと一致しないと考えたため、getJSON 関数の URL を変更することで、先例の問題 (JSONResult 関数が呼び出されなかった) を解決しました。

4

1 に答える 1

3

問題は、'source' オプションを間違って使用していることです。

http://jqueryui.com/demos/autocomplete/#remote-jsonpのドキュメントによると、 ソースの表示リンクをクリックすると、ソースが次の形式になっていることがわかります。

source: function(request, response) { ... }

その関数内で、オートコンプリートのデータをパラメーターとして使用して response が呼び出されます

data = [];
response(data);

response() は、ドロップダウンに結果が表示される典型的なオートコンプリート機能に使用されますが、これは探しているものとはまったく異なります。

jquery のもう 1 つの問題は、autocompCities が更新のターゲットとオートコンプリート ウィジェットの両方であるということです。これは、あなたが望んでいた機能に反しています。郵便番号フィールドをオートコンプリート ウィジェットにする必要がありますが、デフォルトの動作を抑制し、ajax の成功時に autocompCities を更新します。

于 2012-08-12T18:54:41.193 に答える