Dynamic autocomplete using jQuery

Dec 02, 2015

Alphanso Tech



Dynamic Autocomplete using jQuery

jQuery is an adornment of DOM(Document Object Model).jQuery has a nice grip on DOM elements, so it is better to use jQuery to perform the complex or complected DOM operation.

Suppose if you need to create an interactive dropdown menu,what do you think about?,

For Example,  you need a drop down which should looks like a textbox and whenever a user start to type, the drop down should show the suggestion based on typed keyword.It looks quite complected,but think if the data which are suggested by the menu should come from database then?, it looks more complected and complex.

Well, jQuery autocompletion feature overcomes these kinds of complexities as well as dynamic data driven  control over the DOM elements Autocompletion is a widget of displaying suggestion while a user type into the field.

Consider the following example to learn the dynamic autocompletion using jQuery.

Dynamic autocompletion using jQuery

Dynamic autocompletion using jQuery

1.Create a Database and table named students and insert some records

  `student_id` int(11) NOT NULL,
  `name` varchar(100) DEFAULT NULL,
  `email` varchar(100) DEFAULT NULL,
  `contact_no` varchar(100) DEFAULT NULL

2.Create a file which interacts with database and targets students table

3.Create a file autocomplete.php contains the complete code of autocompletion

Kindly ,download the code zip for the complete code
include_once $_SERVER['DOCUMENT_ROOT'] . '/initconfig.php';
include_once 'dal/students.php';
$objStudent = new Students();
$student_data = $objStudent->get_names(); //this function returns the mysqli resource from students table
$student_name_col = array();
while ($fetch_data = mysqli_fetch_array($student_data)):
    $student_name_col[] = array('key' => $fetch_data['student_id'], 'value' => $fetch_data['name']);

$student_col_json = json_encode($student_name_col);

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="../../favicon.ico">

        <title>Jquery Auto Completion</title>
        <!-- Bootstrap core CSS -->
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

        <link rel="stylesheet" href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">


        <div class="container">
            <div class="header clearfix">
                <h3 class="text-muted">Dynamic Auto completion using jQuery</h3>

            <div class="jumbotron" style="height: 700px;">
                <div class="col-md-6 col-md-offset-3">
                    <div id="at_textbox">
                        <p class="col-md-12" id="text-1">
                            <label>Auto Completion Student Name</label>
                            <input type="text" class="form-control" name="student_name" id="student_name"/>
                            <input type="hidden" name="student_id" id="student_id"/>



        </div> <!-- /container -->

            $(function () {
                var availableTags = <?= $student_col_json; ?>;
                    autoFocus: true,
                    source: availableTags,
                    select: function (event, ui) {
                        return false;


The complete Demo of Dynamic autocompletion using jQuery

| Complete Code Download

I hope you will find this post very useful regarding jQuery Auto Complete. Let me know any questions if you have in comment regarding jQuery. I will reply you ASAP.

Have you got cool idea about Web Application development? Contact us Now to get free consultation on your idea. Alphanso Tech is rated as one of the best Web Development Company in India.

Post by Alphanso Tech

Created in 2013, Alphanso Tech is a leading IT Consulting company with a presence in the USA, Canada, and India.We are a trusted and leading service provider to many top-tier companies in the area of Custom WordPress Development , Web Application Development , iOS App Development , Outsourcing Services, Online Marketing and many other related activities.

One Response to Dynamic autocomplete using jQuery

  1. Pingback: Jquery Drag and Drop Tutorial | step by step tutorial guide

Leave a Reply

Your email address will not be published. Required fields are marked *