0

これは、以前の JQueryUI オートコンプリートの質問からの続きです。

今回は、データが返されました...しかし、表示するhtmlを定義する方法と、結果でそのhtmlを動的に更新する方法がわかりません。

だから、ここに私のjqueryがあります....

Home.js

function AutoComplete(element) {
    var cache = {};
    $(element).autocomplete({
        minLength: 2,
        source: function (request, response) {
            if (request.term in cache) {
                response(cache[request.term]);
                return;
            }
            else {
                $.getJSON("/api/autocomplete/" + 
                            encodeURIComponent(request.term),
                    function (data) {
                        cache[request.term] = data;
                        response(data);
                    });
            }
        }
    });
}

これは私のビューに配線されています

Index.aspx

<script type="text/javascript">
    $(document).ready(function () {
        AutoComplete("#searchQuestion");
    })
</script>

今..いくつかの（まだ作成されていない）html/div/etcを使用するように指示する方法がわかりません。...そしてその<ul>リストにデータを入力します（このメソッドを呼び出す代わりに、上記のコールバックを拡張すると仮定していresponse(data)ます..wtfはそれですか？）

4

2 に答える 2

4

jQuery UI のオートコンプリートの実際の例を次に示します。それが役に立てば幸い：

    var cache = {};
    $("#textbox").autocomplete({
      source: function(request, response) {
       if (request.term in cache) {
        response($.map(cache[request.term].d, function(item) {
         return { value: item.value, id: item.id }
        }))
        return;
       }
       $.ajax({
        url: "/Services/AutoCompleteService.asmx/GetEmployees",  /* I use a web service */
        data: "{ 'term': '" + request.term + "' }",
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataFilter: function(data) { return data; },
        success: function(data) {
         cache[request.term] = data;
         response($.map(data.d, function(item) {
          return {
           value: item.value,
           id: item.id
          }
         }))
        },
        error: HandleAjaxError  // custom method
       });
      },
      minLength: 3,
      select: function(event, ui) {
       if (ui.item) {
        formatAutoComplete(ui.item);   // custom method
       }
      }
     });

まだ行っていない場合は、Firebugを入手してください。これは、Web 開発にとって非常に貴重なツールです。この JavaScript にブレークポイントを設定して、何が起こるかを確認できます。

于 2010-09-13T12:57:28.140 に答える