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?
A:
Here is 1/2 a solution; have your AJAX call return the string "No Results" when it has no results.
To make the single result not clickable probably requires looking at the source of the plugin.
Hogan
2010-08-15 04:28:47
I'm willing to accept a solution that sends No Results from PHP or from JS, doesn't matter to me.
babonk
2010-08-15 05:18:13
@babonk : have you implemented the no results in your PHP?
Hogan
2010-08-15 15:19:27
Currently no, but I could do that if there was a solution
babonk
2010-08-15 22:19:31
+4
A:
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.
Shaun Mahood
2010-08-19 21:50:53
Thanks, it worked for me. Couple of changes I have made for my use: 1) Forced it not to show() when there was nothing entered 2) with multiple autocompletes on the page, you need to add some ifs to get it working with the right ones. Thanks for the thorough answer!
babonk
2010-10-19 03:49:32
A:
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.
Yi Jiang
2010-08-21 02:44:40