Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

"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>
like image 432
aphextwig Avatar asked Nov 13 '22 11:11

aphextwig


1 Answers

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.

like image 145
j08691 Avatar answered Jan 04 '23 22:01

j08691