Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • autocomplete function with php

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 108
    Comment on it

    Jquery is a powerful library and it is heart of web develepment. It includes different types of functions.

    Today we are going to discuss function named autocomplete() which is useful to auto populate the suggestions as user types, filtering and searching. It is included in jquery ui api. We will take an example for auto complete. Please check the example below.

    <?php
    $query = mysql_query("SELECT country_name from country_list");
    $country_arr = mysql_fetch_array($query);
    ?>
    <html>
    <head>
    <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>
    </head>
    jQuery(function($){
    
    var collect_list = <?php echo json_encode($country_arr); ?>;
    $( "#country_list" ).autocomplete({
    source: collect_list,
    select: function(event, ui) { 
    
        $("#country_list").val(ui.item.label)
        jQuery("#country_list_frm").submit();
         }
    });
    });
    
    });
    <body>
    <div class="main">
    <form id="country_list_frm">
    <label>country</label>
    <input type="text" name="country_list" id="country_list" />
    </form>
    </div>
    </body>
    </html>
    

    In above example, we are fetching list of countries details from database and passing it in the auto-complete function. It will populate the list of countries as user types in text field.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: