Question

like described in the headline i got a little problem getting the jqueryUI autocomplete Widget to work.

It sounds silly but im hanging the whole day getting that thing solved, but i didnt. I`ve developed a few years C# and now trying, since a month or so…, to develop with asp and jquery. Just for showing, I´ve searched the web and especially stackoverflow and tried a lot to getting it run.

Ok here`s the code.

Definition TextBox:

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

The AutoComplete Jquery Script Part:

<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>

The 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();
} 

For the sake of completeness, the 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;
   }

If you need more, please tell me.

The debug lines are outcommented.

If i check the jquery part i get the data i want but it won’t be displayed at the txtsearch.
And i didn’t really understand how that AutoComplete jquerUI Method will display that List, but the coding should be correct.

Answer 1

Actually, you could be a victim of a very nasty JavaScript feature called automatic semicolon insertion. The return statement in your success callback / jQuery map function is written wrong.

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

This should be a correct syntax:

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

JavaScript compiler adds an automatic semicolon behind the return statement in the first case, causing it to return nothing / undefined.

This SO question has a very good overview of the rules for this behavior.