1

見出しで説明したように、jqueryUI オートコンプリート ウィジェットを動作させるのに少し問題がありました。

ばかげているように聞こえますが、そうm hanging the whole day getting that thing solved, but i didnです。私は数年間 C# を開発してきましたが、1 か月ほど前から、asp と jquery を使用して開発しようとしています。示すために、私はウェブ、特にstackoverflowを検索し、それを実行するために多くのことを試みました.

これがコードです。

定義テキストボックス:

 <asp:TextBox ID="txtSearchbox"
                    style="float:left;padding:5px 1px 5px 1px;" runat="server" >
 </asp:TextBox>

オートコンプリート Jquery スクリプト部分:

<script type="text/javascript">

    $(document).ready(function () {
        $('#txtSearchbox').autocomplete( {
         source: function (request, response) {
                    //console.log(request.term);
             $.ajax
             ({
                 url: "AutoComplete.asmx/GetSearchInfo",
                 data: "{ 'prefixText': '" + request.term + "' }",
                 dataType: "json",
                 type: "POST",
                 contentType: "application/json; charset=utf-8",
                 dataFilter: function (data) {
                     //console.log(data.toString());
                     //alert(data.toString());
                     return data;
                 },
                 success: function (data) {
                     // console.log(data.d.toString());
                     response($.map(data.d, function (item) {
                         // console.log(item.Isin)
                         // console.log(item.Name)
                         return
                         {
                             label: item.Name.toString()
                             value: item.Name.toString()
                         }
                     }));
                },
                 error: function (XMLHttpRequest, textStatus, errorThrown) {
                     alert(textStatus);
                 }
             });
         },
         minLength: 2
         });
    });

</script>

AutoComplet.asmx:

[WebMethod]
public List<SearchObject> GetSearchInfo(string prefixText) 
{
    var seo = new SearchObject();
    var getSeo = staticList.getSEOlist().Where(str => str.SearchString.ToLower().Contains(prefixText.ToLower()));

    return getSeo.ToList();
}

完全を期すために、CSS:

    /*AutoComplete flyout */
.autocomplete_completionListElement
{
    margin:0px!important;
    background-color:#ffffff;
    color:windowtext;
    border:buttonshadow;
    border-width:1px;
    border-style:solid;
    cursor:'default';
    overflow:auto;
    height:200px;
    font-family:Tahoma;
    font-size:small;
    text-align:left;
    list-style-type:none;
    padding: 5px 5px 5px 5px;
    }

/* AutoComplete highlighted item */
.autocomplete_highlightedListItem
{
    background-color:#ffff99 ;
    color:black;
    padding:0px;
    }

    /* AutoComplete item */
.autocomplete_listItem
{
    background-color:window;
    color:windowtext;
    padding:0px;
   }

さらに必要な場合は、教えてください。

デバッグ行はコメントアウトされています。

jquery部分を確認すると欲しいデータは取得できますが、txtsearchで表示されません。そして、AutoComplete jquerUI メソッドがそのリストを表示する方法を本当に理解していませんでしたが、コーディングは正しいはずです。

4

3 に答える 3

7

実際には、自動セミコロン挿入と呼ばれる非常に厄介なJavaScript機能の犠牲になる可能性があります。成功コールバック/jQueryマップ関数のreturnステートメントが間違って記述されています。

return
{
    label: item.Name.toString()
    value: item.Name.toString()
}

これは正しい構文である必要があります。

return {
    label: item.Name.toString()
    value: item.Name.toString()
}

JavaScriptコンパイラは、最初のケースでreturnステートメントの後ろに自動セミコロンを追加し、何も返さない/未定義を返します。

このSOの質問には、この動作のルールの非常に優れた概要があります。

于 2012-05-31T02:15:06.860 に答える
1

問題が解決しました。

それは動作します。Miroslav Popovic の助けを借りて、動作するようになりました。本当に役に立たない JavaScript 機能の「自動セミコロン挿入」でした。

コード構造を少し変更すると、すべて正常に動作します。

修正した部分は次のとおりです。

return{
       label: item.Name.toString(),
       value: item.Name.toString()
}

THX - 助けてくれたすべての人へ

于 2012-05-31T07:04:35.587 に答える
1

.net 4でasp.net、c#を使用してオートコンプリートを実行しています。これが私のやり方です。

// .aspx ページの場合、

   <asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
        <asp:ServiceReference Path="/PathToServiceHere/AutoComplete.svc" />            
    </Services>
</asp:ScriptManager>

// テキスト ボックス、ここではサーバー サイドのテキスト ボックスは使用しませんが、JQuery の問題ではないと思います

  <input id="ModelBox" type="text" style="width: 158px;" />

// Jクエリ

     $(function () {
            $("#ModelBox").autocomplete({
                minLength: 0,
                delay: 0,
                cache: true,
                source: function (req, addToList) {

                    var popList = new GetAutoCompleteService.GetAutoComplete();
                    popList.GetModels(req.term, function (model) {

                        var listItems = [];
                        if (model.length > 0) {
                            for (var key = 0; key < model.length; key++) {
                                listItems.push(model[key].Model);
                            }
                        } else {
                            listItems.push("No Matching Model.");
                        }
                        addToList(listItems);
                    }, function onError() {
                    });
                }
            });

            $("#ModelBox").click(function () {
                // close if already visible
                if ($("#ModelBox").autocomplete("widget").is(":visible")) {
                    $("#ModelBox").autocomplete("close");
                    return;
                }

                // work around a bug (likely same cause as #5265)
                $(this).blur();

                // pass empty string as value to search for, displaying all results
                $("#ModelBox").autocomplete("search", "");
                $("#ModelBox").focus();
            });
        });

// AutoComplete.svc

  namespace autocomplete.Service
    {
        using System.Collections.Generic;
        using System.Linq;

        using System.ServiceModel;
        using System.ServiceModel.Activation;

        using System.Data;

        [ServiceContract(Namespace = "GetAutoCompleteService")]
        [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
        public class GetAutoComplete
        {

            [OperationContract]
            public List<Models> GetModels(string model)
            {

               // Data access here to retrieve data for autocomplete box then convert to list

    // or however you get the data into list format
                List<Models> List = dataJustPulled.ToList(); 
                return List;
            }
        }
    }
于 2012-05-30T15:05:23.350 に答える