簡潔な構文

Question

This example of using jquery-ui autocomplete with a remote web service WCFのWebサービスを呼び出す素敵な簡潔な構文は次のとおりです。

$("#birds").autocomplete({ 
source: "search.php", 
minLength: 2 
}); 

次のようにここでsearch.phpは配列を返します。

[ 
    { "id": "Passer domesticus", "label": "House Sparrow", "value": "House Sparrow" }, 
    ... 
] 

私が使用したいですWCF Webサービスが、同じ構文がbecause the array returned is wrapped in a 'd' container objectを動作しません：

{"d": 
    [ 
    { "id": "Passer domesticus", "label": "House Sparrow", "value": "House Sparrow" }, 
    ... 
    ] 
} 

もちろん私は、「D」の容器に見て、次のようなもののコードを書くことで、このラウンドを取得することができます（未テストを - タイプミスを持つことができます）：

$("#birds").autocomplete({ 
minLength: 2 
    source: function (request, response) { 
      $.getJSON("search.svc/GetBirds", request, function (data, status, xhr) { 
       if (status == "success") response(data.d); 
       } 
      } 
}); 

は、これは私がいくつかのより多くを行うか、そこにあることができる最高です簡潔な構文？

理想的には、私はurlとして "source"を指定し、 "d"コンテナの有無にかかわらず返される応答で動作させたいと考えています。

Answer 1

私の考えでは、2つの選択肢があります。

最初のは、結果をマップするヘルパー関数を作成することです。これはおそらく最も簡単な解決策です。シンプルコード：

$("#birds").autocomplete({ 
minLength: 2 
    source: function (request, response) { 
      $.getJSON("search.svc/GetBirds", request, function (data, status, xhr) { 
       if (status == "success") 
        handleResponse(data); //you write this function 
       } 
      } 
}); 

二オプションは、デフォルトの動作をオーバーライドするAutoComplete plugin機能を"monkeypatch"することができます。

あなたの場合は、$.ui.autocomplete.prototype._initSource機能を無効にする必要があります。あなたが基本的にUIライブラリのコア関数をオーバーライドしていて、そのライブラリが更新されていれば関数は常にそれをオーバーライドすると警告します。

// Create a closure so that we can define intermediary 
// method pointers that don't collide with other items 
// in the global name space. 

function monkeyPatchAutocomplete() { 

    // don't really need this, but in case I did, I could store it and chain 
    var oldFn = $.ui.autocomplete.prototype._renderItem; 
    var requestIndex = 0; 
    $.ui.autocomplete.prototype._initSource = function() { 
     // whatever 
     console.log("Override method"); 
     var self = this, 
      array, url; 
     if ($.isArray(this.options.source)) { 
      array = this.options.source; 
      this.source = function(request, response) { 
       response($.ui.autocomplete.filter(array, request.term)); 
      }; 
     } else if (typeof this.options.source === "string") { 
      url = this.options.source; 
      this.source = function(request, response) { 
       if (self.xhr) { 
        self.xhr.abort(); 
       } 
       self.xhr = $.ajax({ 
        url: url, 
        data: request, 
        dataType: "json", 
        autocompleteRequest: ++requestIndex, 
        success: function(data, status) { 
         console.log("Override success function, handling request"); 
         if (this.autocompleteRequest === requestIndex) { 
          response(data); //you handle both types of data here 
         } 
        }, 
        error: function() { 
         console.log("Override error function, handling request"); 
         if (this.autocompleteRequest === requestIndex) { 
          response([]); 
         } 
        } 
       }); 
      }; 
     } else { 
      this.source = this.options.source; 
     } 
    }; 
} 


// When DOM is ready, initialize. 
$(document).ready(function() { 
    monkeyPatchAutocomplete(); 

    $("#birds").autocomplete({ 
     source: "http://jqueryui.com/demos/autocomplete/search.php", 
     minLength: 2 
    }); 

}); 

次に、あなたのコードは、それだけの違いを処理し、成功メソッドに渡し、別の何かを実行する必要はありません。

これはjsFiddleです：http://jsfiddle.net/lemkepf/DAQ6s/5/注：実際のオートコンプリートはクロスドメインセキュリティとして機能しません。ボックスに入力を開始すると、firebugを開き、console.debug行が表示されます。