Showing posts with label Css. Show all posts
Showing posts with label Css. Show all posts

Friday, November 29, 2013

How to Integrate Auto complete in Textbox JQuery

First of All Create a Text box

<label for="tags">Tags:</label>
<input id="tags">

Then to integrate autocomplete jquery Library Download JQuery UI file from Link HERE or Add server Link in your Head Section.


Just Like:

<script src="js/jquery-ui.js"></script>

OR

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Then add items you want autocomplete to an array


var availableTags = [
        "shihab",
        "sabeer",
        "Tholhath",
        "Anju",
        "Anu",
        "shivin",
        "Jacob",
        "Sajeesh",
        "Jinesh",
        "Shibu",
        "Kiran",
        "Arjun",
        "Jamsheer",
        "Jam",
        "Boby",
        "Aji",
        "Subash",
        "Kumari",
        "Shahid",
        "Siraj",
        "Hari",

        "Radha"];

Then integrate Auto completion to a Control means TextBox.


$("#tags").autocomplete({
        source: availableTags,
        position: {
            my: "left top",
            at: "left bottom",
        }
    });

Use this styles for Good Look for auto Completion List


.footer-auto {
    background: gray;
    color: white;
}