JQeury Autocomplete - show all results

JavaScript
1

Hello Guys,

this is my first post, I found this code very useful, I was wondering if there is a possibility to add a button to show all the results

thanks for your help
have a nice day

Solidus

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<title>jQuery UI Autocomplete Testt</title>
<link href=“http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css” rel=“stylesheet” type=“text/css”/>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js”></script>
<script src=“http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js”></script>
<script>
$(document).ready(function() {
var data = [
{label: ‘Google’, value: ‘http://google.com’},
{label: ‘Yahoo’, value: ‘http://yahoo.com’},
{label: ‘BMW’, value: ‘http://bmw.com’},
{label: ‘Bing’, value: ‘http://bing.com’}
];

	$("input#autocomplete").autocomplete({
		source: data,
		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>
</head>
<body>
<input id=“autocomplete” />
</body>
</html>

2

Yes there is.

The autocomplete documentation shows in the Options section that there’s a minLength setting, which says:

The minimum number of characters a user has to type before the Autocomplete activates. Zero is useful for local data with just a few items. Should be increased when there are a lot of items, where a single character would match a few thousand items.

That can be used with something from the Methods section of the documentation called search, which says:

Triggers a search event, which, when data is available, then will display the suggestions; can be used by a selectbox-like button to open the suggestions when clicked. If no value argument is specified, the current input’s value is used. Can be called with an empty string and minLength: 0 to display all items.

3

thanks for your quick answer,
I also thought that, unfortunately my knowledge in javascript is very poor,
can you show me a sample how to add a button, to call the procedure to show all results?

thanks
Solidus

4

An example, after you’ve already initialised the autocomplete with a minLength of 0, might be something like:


<button id="showall">Show all</button>



$('#showall').on('click', function () {
    $('#autocomplete').autocomplete('search' , '');
});
5

thanks,
I changed the minLength to 0, but the example dows not work, this is the html example, it seems all right, but I cannot understand the problem:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<title>jQuery UI Autocomplete Testt</title>
<link href=“http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css” rel=“stylesheet” type=“text/css”/>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js”></script>
<script src=“http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js”></script>
<script>
$(document).ready(function() {
var data = [
{label: ‘Google’, value: ‘http://google.com’},
{label: ‘Yahoo’, value: ‘http://yahoo.com’},
{label: ‘BMW’, value: ‘http://bmw.com’},
{label: ‘Bing’, value: ‘http://bing.com’}
];

$(“input#autocomplete”).autocomplete({
source: data,
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;
}
});
});

$(‘#showall’).on(‘click’, function () {
$(‘.selector’).autocomplete(‘search’ , ‘’);
});
</script>
</head>
<body>
<input id=“autocomplete” /><button id=“showall”>Show all</button>
</body>
</html>

thanks for your time

Solidus

6

OK, just changed the “$(‘.selector’).” with “$(“input#autocomplete”)” and it works

one last think, how Can I toogle the button to open/close the menu???

thanks
Solidus

7

found the solution by myself, if anybody need a very useful script like this, this is the final code:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<title>jQuery UI Autocomplete Testt</title>
<link href=“css/ui-lightness/jquery-ui-1.8.18.custom.css” rel=“stylesheet” type=“text/css” />
<script type=“text/javascript” src=“js/jquery-1.7.1.min.js”></script>
<script type=“text/javascript” src=“js/jquery-ui-1.8.18.custom.min.js”></script>
<script>
$(document).ready(function() {
var data = [
{label: ‘Google’, value: ‘http://google.com’},
{label: ‘Yahoo’, value: ‘http://yahoo.com’},
{label: ‘BMW’, value: ‘http://bmw.com’},
{label: ‘Bing’, value: ‘http://bing.com’}
];

$(“input#autocomplete”).autocomplete({
source: data,
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;
}
});

$(‘#showall’).on(‘click’, function () {

if ( $(“input#autocomplete”).autocomplete( “widget” ).is( “:visible” ) ) {
$(“input#autocomplete”).autocomplete( “close” );
return;
}
$( this ).blur();
$(“input#autocomplete”).autocomplete(‘search’ , ‘’);
$(“input#autocomplete”).focus();

});

});

</script>
</head>
<body>
<input id=“autocomplete” /><button id=“showall”>Show all</button>
</body>
</html>

Solidus