2017-10-03 6 views
0

基本的なjQueryオートコンプリートを動作させようとしています。 VS 2017でWCFサービスを使用してSQL Serverを使用する。すべてが良いようだ... .aspxはレンダリングOK、テキストボックスに1文字を入力し、.svcが起動していること、SQL関数をデバッグしてデータを取得していること、jQueryをデバッグしてコンソールログその配列は返されますが、コンソールは、配列がテキストボックスに入力されたすべての追加文字とともに減少することを見てください...しかし、項目の選択を可能にするページ上にリストは生成されません。奇妙な。ハードコーディングされた国リストでもそれを正常に実行してもうまくいきました。 .svcを除いてjQueryとHTMLを含めて、正確な値を返すことが確認されています。jQueryオートコンプリートは、SQL配列/テキストボックスの選択をレンダリングしません。

<script> 
$(document).ready(function() { 
    BindControls(); 
}); 

function BindControls() { 
    $("#txtMembers1").autocomplete({ 
     source: function (request, response) { 

      var val = request.term; 
      console.log(val); 
      $.ajax({ 
       url: "searchMembers1.svc/getMembers", 
       data: JSON.stringify({ sLookUP: val }), 
       dataType: "json", 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       dataFilter: function (data) { return data; }, 
       success: function (data) { 
        response($.map(data, function (item) { 
         return { 
          value: item } 
        })) 
        console.log(data) 
       }, 
       error: function (XMLHttpRequest, textStatus, errorThrown) { 
        alert(textStatus); 
       } 
      }); 
     }, 
     minLength: 2 // MINIMUM 1 CHARACTER TO START WITH. 
    }); 

    /* var Countries = ["ARGENTINA", "AUSTRALIA", "BRAZIL", "BELARUS", "BHUTAN", "CHILE"]; 

    // BIND ARRAY OF STRINGS WITH AUTOCOMPLETE FUNCTION. 
    $("#txtMembers").autocomplete({ source: Countries }); */ 


} 

HTML -------

<head runat="server"> 
    <title></title> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 

    <style type="text/css" > 
    .ui-autocomplete { max-height: 150px; overflow-y: auto; overflow-x: hidden; font-size: 9pt; } 
    * html .ui-autocomplete { height: 100px; } 
</style> 

</head> 
<body> 

<form name="frmSearch" runat="server"> 
    <div style="font:15px Arial;" > 
    <b>Members</b>:  <input id="txtMembers1" type="text" runat="server" /> 
    <%--<b>Members</b>:  <asp:TextBox ID="txtMembers" runat="server" ></asp:TextBox>--%> 
</div> 

+0

サービスの出力を貼り付けることもできますか?その文字列の配列のサービスからの応答を想定して、レスポンス(データ)を返すだけで成功関数を変更できますか? –

+0

DA がsearch1(55,17) DARがsearch1(55,17) [対象オブジェクト] がsearch1(68,25) {[機能]、 __proto__:{}、 D:[] } [対象オブジェクト] がsearch1(68,25) {[機能]、 __proto__:{}、 D:[]} LYがsearch1(55,17) [対象オブジェクト] 検索1(68,2 5) { [機能]、 __proto__:{}、 D:[ 0: "Lyles"、 1: "Lyles"、 2: "Lyles"、 長さ:3 ] } – Darnel

+0

したがって、配列を持つプロパティはdです。あなたはdata.dを使ってそれにアクセスし、それをマッピングするべきではありませんか? Like-response($。map(data.d、function(item){ return { 値:item} })) –

答えて

0

それはハードコードされた配列で働いていたので、私の疑いはからの応答形式にありましたあなたのWebサービス。私は、あなたの応答のプロパティ 'd'がデータ配列を保持していることをコメントから知るようになったので、応答のデータの代わりにdata.dをマッピングする必要があります。

response($.map(data.d, function (item) { return { value: item } })) 
関連する問題