jQuery and Grails/HTML - Make text field complete text like Google does
I wanna make certain fields in my page to show me like a list of possible finishing sentences just like Google does.
I think this is done via jQuery, but I'm not sure.
The textfield is named commodity.
Let's say I write General and in the list, array, or DB I have General Commodity I should show me General Commodity under the textfield.
Thanks in advance!
-------UPDATE-------
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js">
var data = "General Commodity,General St开发者_如何学编程ore,General Custer,General Mills".split(",");
$("#Ccommodity").autocomplete({
source: data
});
</script>
When I go to the Ccommodity input textfield I write G and nothing happens, maybe I have some syntax error there.
Thanks for the help
You will probably want to look into the jQueryUI Autocomplete widget. It has several ways of providing lists of suggestions, and there will almost certainly be something in there that will work for you.
Here's a very basic demo: http://jsfiddle.net/QU9st/
Here's the source for that:
$(function() {
var data = "General Commodity,General Store,General Custer,General Mills".split(",");
$("#commodity").autocomplete({
source: data
});
});
That demo simply uses a static string array as the datasource, but you can also use remote datasources, in formats like JSON or XML.
To get it, just drop this somewhere in your <head> tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
Of course, you will also need to include jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
jQuery has an Autocomplete widget That can get it to do what you want it to do. here's an example: jQuery:
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax".split(" ");
$("#commodity").autocomplete(data);
html:
<input type="text" id="commodity" name="commodity">
加载中,请稍侯......
精彩评论