AutocompleteControl

From rbachwiki
Revision as of 17:54, 6 January 2017 by Bacchas (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search
  <script type="text/javascript">
        var programLangs = [
            "ActionScript",
            "AppleScript",
            "ASP.NET",
            "BASIC",
            "C",
            "C++",
            "C#",
            "COBOL",
            "Dart",
            "Erlang",
            "Fortran",
            "Go",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby"
        ];

        $("document").ready(function() {
            $("#auto1").autocomplete({
                source: getData,
                autoFocus: true
            });

            function getData(req, callback) {
                var result = [];
                for (var i = 0; i < programLangs.length; i++) {
                    if (programLangs[i].substring(0, 1) == req.term.toUpperCase())
                        result.push(programLangs[i]);
                }
                callback(result);
            };

        });
    </script>
    <style>
        /* the .ui class is predefined in the jquery library. this just overwrites it.*/
        
        .ui-autocomplete {
            max-height: 200px;
            overflow-y: auto;
            overflow-x: hidden;
        }
    </style>
</head>

<body>
    <form>
        <h1>Using the Autocomplete Control</h1>
        <p>The autocomplete control provides suggestions to the user as they enter data into a field. This can be used to speed up data entry, guide the user toward entering a set of known default values, etc.</p>
        <p>The list of suggestions can come from an array, a URL, or a function that you supply that can retrieve the data from wherever your application desires.</p>
        <h3>Basic Autocomplete control</h3>
        <label>Type the name of a programming language: </label><input id="auto1" type="text" />
    </form>
</body>

Widgets