jQueryAutocompletePlus 0.1

jQueryAutocompletePlus is a simple plugin which gives your input feild a Facebook/Twitter like autocompletion superpowers. It allows you to define a trigger and show results when typed

@ for Searching people
# for Searching tags
$ for Stock Companies
or whatever you can imagine of...

Try it here

Search hash tags with # and people with @ key

Step 1: Add the required files


                        <link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.css"></script>
<script type="text/javascript" src="jqueryautocompleteplus.js"></script>

Step 2: Add data points


                    var people = [
    {
        value: "Voldemort",
        label: "tom.riddle@hogwards.edu",
    },
    {
        value: "Bruce Wayne",
        label: "batman@wayne.com",
    },
    {
        value: "Tony",
        label: "iamironman@stark.com",
    }
];

var hashTags = [
    {
        value: "potterhead",
        label: "potterhead"
    },
    {
        value: "marvel",
        label: "potterhead"
    },
    {
        value: "DcComics",
        label: "potterhead"
    }
];

Step 3: Add your options


                    $('.myTextarea').jqueryautocompleteplus({
    trigger1: "@",
    outputTrigger1: false,
    minLength1: 2,
    data1: people,   

    trigger2: "#",
    outputTrigger2: true,
    minLength2: 3,
    data2: hashTags
});

Currently jqueryAutocompletePlus supports only two (in number) triggers. But its so easy that you can easily make it work for more triggers. For each trigger, there are a set of parameters needed. Here is a descriptions of each one of them.

Parameters

All these parameters hold same defination for all triggers. Just suffix the parameter with the respective trigger number.

trigger1: This defines the trigger. After typing which, the search on its endpoint will trigger and show the results. Examples:

trigger1: "@"
trigger1: "$"

outputTrigger1: When we select an option from the suggestions, we sometimes need the trigger to be a part of the text. Best example for this case is hash-tags. When we select from a bunch of hash-tags, we need the text to be selected is with a '#' prefix. (#LOTR) This option defines just that. Examples:

outputTrigger1: true
outputTrigger1: false

So when it's set to true, we will see the defined trigger as a prefix to the selected option.

minLength1: This defines the minimum number of characters required to be typed before the search triggers. For each trigger, you can specify a seprate minimum length. Examples:

minLength1: 2

data1: As the name suggest,this option defines the data point for the specified trigger. Examples:

data1: peopleDirectory

So in this example, if the trigger1 gets triggered, all results will be populated from the peopleDirectory data.