CODEWITHSUNDEEP
jqueryjquery-uiautocompletejquery-ui-autocomplete
aphextwig
aphextwig

Reputation: 553

"No Matches" message for jquery ui autocomplete

I'm new to this and have looked at other examples but am unclear on how to set a "No Matches" messages for the latest version of autocomplete http://docs.jquery.com/UI/Autocomplete when there are no results.

This is the code I'm using, can someone help write the rest, ideally keeping it clickable to a 'suggestions' page.

<script>
    $(document).ready(function() {
        var data = [
            {label: 'Yahoo', value: 'http://yahoo.com'},
            {label: 'BMW', value: 'http://bmw.com'},
            {label: 'Bing', value: 'http://bing.com'}
        ]; 
            $("input#autocomplete").autocomplete({
                source: function(request, response) {
                var results = $.ui.autocomplete.filter(data, request.term);
                response(results.slice(0, 10))},            
            focus: function (event, ui) {
                $(event.target).val(ui.item.label);
                return false;
            },
            select: function (event, ui) {
                $(event.target).val(ui.item.label);
                window.location = ui.item.value;
                return false;
            }
        });
    });
  </script>

Thanks in advance.

UPDATE: Have managed to get a fix together, but how can I embed a working link within the message?

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
        var data = [
                {label: 'Yahoo', value: 'http://yahoo.com'},
                {label: 'BMW', value: 'http://bmw.com'},
                {label: 'Bing', value: 'http://bing.com'}
        ]; 
                $("input#autocomplete").autocomplete({
                source: function(request, response) {
                var results = $.ui.autocomplete.filter(data, request.term);
                if (!results.length) {
                            $("#no-results").text("<a href=\"/\">No results found!</a>");
                        } else {
                            $("#no-results").empty();
                        }        
                response(results.slice(0, 10));
                },          
            focus: function (event, ui) {
                $(event.target).val(ui.item.label);
                return false;
            },
            select: function (event, ui) {
                $(event.target).val(ui.item.label);
                window.location = ui.item.value;
                return false;
            }               
                });
    });
//]]>  
  </script>

Upvotes: 5

Views: 8389

Answers (1)

j08691
j08691

Reputation: 208022

Instead of using $("#no-results").text("<a href=\"/\">No results found!</a>") try $("#no-results").html('<a href="">No results found!</a>'). Although why you want an anchor tag with no link confuses me.

Upvotes: 1

Related Questions