HTML Form text input suggestions box

问题

I am attempting to modify one of my text input boxes in a form that I have. I would like suggestions to pop up as the user types. Basically, I would like to emulate the "Tags" box that is on the ask question pages here on Stack Overflow, but with different data as the suggestions obviously. How would I go about doing this?

For context, this is for a club at a college, and I am trying to allow members to type in their majors and as they type have a suggestions come up.

回答1:

jQuery has an autocomplete plugin that you could use.

It depends on what kind of language/platform/etc. you are using as well. I am a primarily .NET developer and I've used the following:

SQL Server for storing data
Web Forms or MVC for the web app
An ashx handler to retrieve and format the suggestions
jQuery plugin above to render the results returned from the ashx underneath an input box

回答2:

This snippet from Cena Mayo did just what I was looking for:

<input id="color" list="suggestions">
<datalist id="suggestions">
    <option value="Black">
    <option value="Red">
    <option value="Green">
    <option value="Blue">
    <option value="White">
</datalist>

回答3:

Well if you want to get information from a database on commonly used or already created elements you'll need more than just html. If you just want the form to suggest things people have already input in their own browsing sessions the form will do that automatically.

What I can point you towards is this guys post. He outlines and gives the basic code to get you started on the path for auto suggestion in forms He even gives you the files to get you going, but you'll have to do some modification work.

Also included later in the post somebody adds this to go into the ajax_framework file.

`function clearsuggest() {

e = document.getElementById('results');

e.style.display="none"; } `

In search.php: onClick="fill();clearsuggest();return false;"

That section of code will clear the suggestions upon click of a suggestion. Hope this helps and good luck.

回答4:

For Unix-like environment (Linux, FreeBSD, etc) I wrote this autocomplete tools: http://olegh.ftp.sh/autocomplete.html

It consumes very few system resources, and can handle huge dictionaries: 10,000,000+ entries is OK.

And,this tool does not use SQL database, since SQL is slow.

来源：https://stackoverflow.com/questions/6459832/html-form-text-input-suggestions-box

标签

html

forms

html5

input

autosuggest