CODEWITHSUNDEEP
javascriptjquery-uiasp.net-mvc-3jquery-ui-autocomplete
aadi1295
aadi1295

Reputation: 992

Jquery autocomplete no result append as dropdown child issue

I have a website (cpusort.com) made in ASP.Net MVC3, where user can search using jquery ui autocomplete and select from found results.

I am using this script for the results

        $(function () {
            function log(message) {
            }
            $("#cpu").autocomplete({
                source: "/Search/",
                minLength: 1,
                response: function (event, ui) {
                    if (ui.content.length === 0) {
                        alert("No Result Found");
//.append("<a href='/AdvancedSearch/[search_term]'>More results for [search_term]</a>")
                    }
                },
                open: function (event, ui) {
                    var url = "<a href='/AdvancedSearch/[search_term]'>More results for [search_term]</a>";
                    $("ul.ui-autocomplete.ui-menu").append(url);
                },
                select: function (event, ui) {
                    $("#cpu").val(ui.item.title);
                    $("#cpu-query").val(ui.item.query);
                    $("#cpu-clockspeed").val(ui.item.clockspeed);
                    $("#cpu-cores").val(ui.item.cores);
                    $("#cpu-image").val(ui.item.cpuimage);
                    return false;
                }
            })
    .data("ui-autocomplete")._renderItem = function (ul, item) {
        return $("<li>")
        .append("<a href='/Cpu/" + item.query + "'><div style='width:100%'><span class='titlesearch' >" + item.title + "</span></div><div <div style='width:100%'><span class='titlesmallspan'>" + item.clockspeed + " GHz | " + item.cores + "</span></div></a>")
        .appendTo(ul);
    };
        });

But how can I show If there is No result found, and in this case i am using alert, how can I append a single child with text "Search in Advance"

.append("<a href='/AdvancedSearch/[search_term]'>More results for [search_term]</a>")

Please help figure this out, Thanks

Upvotes: 1

Views: 1606

Answers (1)

Praveen
Praveen

Reputation: 56509

I would suggest you to make use of open event of jQuery auto-complete

open: function (event, ui) {
      search_term = event.target.value;
      var d = $('.ui-autocomplete').append("<a href='/AdvancedSearch/[" + search_term + "]'>More results for [" + search_term + "]</a>")

}

This is will append the html elements that you need at end of the options listed in the auto-complete.

JSFiddle#1

Hope you can understand.

Updates:

From your comments, it seems you tried by appending which won't work for open event of auto-complete.

Instead you should go for response event of auto-complete.

Why?

1) open event is triggered when a matching is found and it won't work when the match is not found.

2) whereas response event does triggered in both the cases(this can't be used for you case#1) but it much helpful only for your case#2. 

response: function (event, ui) {
            if (ui.content.length === 0) {  //check for none results
                search_term = event.target.value;
                $(this).next('a').remove(); //Remove before you add
                $(this).after("<a href='/AdvancedSearch/[" + search_term + "]'>More results for [" + search_term + "]</a>");
            }
        }

JSFiddle#2

Well this makes sense, I think so.

Modified the code to re-create something equal to your question.

Upvotes: 1

Related Questions