stubby auto list – Autocompleter and multi-selection Jquery plugin using PHP and Ajax

Here come another great plugin for jquery, this time not made by me, but by @jasonkvickers.

Latest version can be found on his github account: jasonkvickers.

First of all the source code and the demo as always.

                       

We will use index.php file to show you how to use this plugin. First we will set where we want the multi-selection display to appear and the input where the user can write, after this, we need to create the autocompleter and the multi-selection templates.

The multi-selection display and the user input

<div id="stubby-display" class="clearfix"></div>
<br><br>
<input type="text" id="stubbyInput" class="stubbyList1"/>

Easy right? Now, for the templates.

Defining the autocompleter template

<div class="stubby-list-item-template">
    <div class="topicListItem clearfix">
        <div class="list-item-left stubbyList1">
            <img stubby-data="ProfileImage" stubby-image-path="/autocomplete/" alt="Profile Image" width="40px" />
        </div>
        <div class="list-item-right stubbyList1">
            <span stubby-data="FirstName"></span>&nbsp;<span stubby-data="LastName"></span><br /> 
            <span stubby-data="UserName"></span>
        </div>
    </div>
</div>

Defining the multi-selection template

<div class="stubby-display-item-template">
    <div class="my-display-container clearfix">
        <div class="display-item-left">
            <img stubby-image-path="/autocomplete/" stubby-data="ProfileImage" alt="Profile Image" width="20px" />
        </div>
        <div class="display-item-right"> 
            <span stubby-data="UserName"></span>
            <a class="element-button" stubby-delete-button="true">x</a>
        </div>
    </div>
</div>

As you can see we have some custom attributes in this templates:

  • stubby-data – this stands for the key in the JSON object, meaning that it will be show in this part
  • stubby-image-path – the folder where you keep the images, you can leave this blank if you send the full image path in the JSON object

We are almost done, all we need to do now, is to start up the plugin.

Starting the plugin

<script type="text/javascript">
    $("#stubbyInput").stubbyautolist({
        ajaxUrl: 'auto.php',
        keyValue: 'UserName',
        searchKey: 'UserName',
        focusClass: 'stubbyList1'
    });
</script>

Here we will define some parameters:

  • ajaxUrl – the php file we want to get data from
  • keyValue – the field that will be kept so we cand send the data to the server
  • searchKey – from where we will be searching for the input string
  • focusClass – if you plan to use more than one Stubby List per page, you need to define a focusClass that will be unique to the list instance

Finally in after you post this, you can access the data by running $_POST[‘keyValue’], where keyValue must be equal to what you’ve put in the script parameter. For example: $_POST[‘UserName’], cause UserName was what i defined in the keyValue parameter.

Last but not least, comes the server side PHP file, were we will get the data from, Jason Vickers has kindly provided a simple example so you can start using this, here is the file: getJsonData.php

Hope you liked it, and don’t forget to leave a reply 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s