Menu
I'm using the jQuery autocomplete plugin, NOT the UI autocomplete. I would like to make an unclickable No Results message appear whenever they enter something that has no results from the autocomplete. How can I do that?
862
Here's a solution that requires a few small edits to jquery.autocomplete.js.
In jquery.autocomplete.js:
Edit the function hideResultsNow() to that it calls emptyData() first thing
function hideResultsNow() {
$('#emptyData').show();
...
}
Change the keypress bind on the input field to hide #emptyData after each keypress
$input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event) {
$('#emptyData').hide();
...
}
Hide #emptyData after a successful selection (right before it returns true)
function selectCurrent() {
...
$('#emptyData').hide();
return true;
}
Then you need to add a div with the same style list named #emptyData to your HTML below the input box. Here is the complete HTML for the test page I used.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#example").autocomplete(data);
});
</script>
</head>
<body>
API Reference: <input id="example" /> (try "C" or "E")
<div id='emptyData' class='ac_results' style='display: none; position: absolute; width: 151px; top: 20px; left: 91px;'>
<ul style="max-height: 180px; overflow: auto;">
<li id='noDataMsg' >No Results</li>
</ul>
</div>
</body>
</html>
The position of #emptyData was taken from the autocomplete position, and the CSS style is not quite the same as for correct answers, but other than that I don't think there should be anything that will need changes. Hope that solves your problem.
192
I think instead of getting Autocomplete to do the ajax you could do that yourself, then pass the results to the Autocomplete, with a simple filter between those two for no results coming in from the server.
var input = $('input.autocomplete');
var inputLimit = 10;
// Create warning message and hide it
var warning = $('<p></p>').insertAfter(input).text('No results').addClass('warning').hide();
input.keyup(function(){
warning.hide();
$.get('url.php', {q: this.value, limit: inputLimit}, function(data){
if(data){
input.autocomplete(data);
} else {
warning.show();
}
}
});
Of course the warning does not appear within the autocomplete field itself, but this is the best solution I can think of without modifying the plugin source.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
