CODEWITHSUNDEEP
javascriptjqueryhtmlcss
1252748
1252748

Reputation: 15369

how to make text inputs always autocomplete

It seems like some text inputs immediately give me a sort of "dropdown" with values I've filled in in the past. Other times not. Is there a way I can "encourage" this behavior in the input boxes? Why does this sometimes happen and sometimes not? Do I need to give a repeat user a cookie or some other device to ensure they will have this feature, or is there some jquery option? (since I'm already using that).

Upvotes: 0

Views: 154

Answers (3)

RaphaelDDL
RaphaelDDL

Reputation: 4480

The browser gives you past filled values based on the input type and name.

So when someone codes a form in examplea.com with an input named "login", when you go on exampleb.com and have an input named "login" as well, the browser will detect that and you already had some info filled for an input named "login" before and show you some options.

That's the browser behavior.

For a jQuery option, you can use jQuery UI's Autocomplete at http://jqueryui.com/autocomplete/

Upvotes: 0

Xotic750
Xotic750

Reputation: 23492

Here is an idea. If you want to have a specific list of pulldown values for each input field on the page. Then with a little javascript, googles closure compiler and knowledge of creating a favourite/bookmark for your browser, you could add yourself something similar on any web page.

Here is my example code on jsfiddle

HTML

<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" list="sitelist" />
<datalist id="sitelist">
    <option label="Lorem" value="Lorem">
    <option label="Ipsum" value="Ipsum">
    <option label="Dolor" value="Dolor">
</datalist>

Javascript

(function () {
    var d = "proin vestibulum ipsum vel tortor sollicitudin luctus".split(" "),
        l = document.createElement("datalist");

    l.id = "myDynamicDatalist";
    d.forEach(function (w) {
        var o = document.createElement("option");
        o.label = w;
        o.value = w;
        l.appendChild(o);
    });

    document.body.appendChild(l);

    Array.prototype.forEach.call(document.getElementsByTagName("input"), function (e) {
        if (e.list === null || e.list === "") {
            e.setAttribute("list", l.id);
        }
    });
}());

Now using Google's closure compiler, you can get rid of all the whitespace and shorten things to a single line of text just by by setting the option to "simple", and you end up with this.

(function(){var b=document.createElement("datalist");b.id="myDynamicDatalist";"proin vestibulum ipsum vel tortor sollicitudin luctus".split(" ").forEach(function(a){var c=document.createElement("option");c.label=a;c.value=a;b.appendChild(c)});document.body.appendChild(b);Array.prototype.forEach.call(document.getElementsByTagName("input"),function(a){(null===a.list||""===a.list)&&a.setAttribute("list",b.id)})})();

Now prepend to that line with javascript: and save it as a favourite/bookmark and you have created yourself a javascript bookmarklet.

Give it a go. click your favourite/bookmark here on SO and then double click the search box, voila!.

You can even create bookmarklet with jquery, and jqueryui meaning that you could use their autocomplete.

Upvotes: 1

Rick Viscomi
Rick Viscomi

Reputation: 8852

This is a browser-dependent feature. Browsers presumably look at the ID and/or name of the text input field and save the value you enter.

It may be spotty because of the ID/name of the input fields used on the web sites you visit.

Upvotes: 0

Related Questions