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;
}


1 comment: