Autocomplete Textbox with Multiple Values using jQuery PHP and MySQL

Autocomplete Textbox with Multiple Values using jQuery PHP and MySQL

Welcome on Pakainfo.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Autocomplete Textbox with Multiple Values using jQuery PHP and MySQL

In this post we will show you Best way to implement autocomplete textbox using jquery from database php, hear for How to jquery autocomplete ajax php mysql example with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Add External Lib : jQuery UI & jQuery

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

HTML markup Part(index.html)

<label for="proglist">Tag your proglist: </label>
<input id="proglist" size="50">

JavaScript Part (index.js)

<script>
$(function() {
    function split( val ) {
        return val.split( /,\s*/ );
    }
    function extractLast( keywords ) {
        return split( keywords ).pop();
    }
    
    $( "#proglist" ).bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).autocomplete( "instance" ).menu.active ) {
            event.preventDefault();
        }
    })
    .autocomplete({
        minLength: 1,
        source: function( request, response ) {
            // delegate back to simple autocomplete, but more extract the last latest keywords
            $.getJSON("proglist.php", { keywords : extractLast( request.keywords )},response);
        },
        focus: function() {
            // prevent value some inserted on focus
            return false;
        },
        select: function( event, ui ) {
            var keywordss = split( this.value );
            // remove  simple the current input
            keywordss.pop();
            // add the simple selected item
            keywordss.push( ui.item.value );
            // add placeholder to get the comma-and-space at the end
            keywordss.push( "" );
            this.value = keywordss.join( ", " );
            return false;
        }
    });
});
</script>

jQuery UI Autocomplete some Limit source on Multiple Values

source: function( request, response ) {
    var keywordss = split( request.keywords );
    if (keywordss.length < 2) {
      $.getJSON("livepost.php", { keywords : extractLast( request.keywords )},response);
    }else{
       $.getJSON("proglist.php", { keywords : extractLast( request.keywords )},response);
    }
}

Also Read :  The PHP Framework Laravel installation

PHP part : proglist.php:

<?php
    //simple mysql database config- configuration
    $yourhostclientname = 'localhost';
    $youruserclientname = 'root';
    $ydatabasepass = '';
    $dbclientname = 'pakainfo';
    
    //connect with the database
    $db = new mysqli($yourhostclientname,$youruserclientname,$ydatabasepass,$dbclientname);
    
    //get search keywords
    $livesearch = $_GET['keywords'];
    
    //get matched data from proglist table
    $query = $db->query("SELECT * FROM proglist WHERE clientname LIKE '%".$livesearch."%' ORDER BY clientname ASC");
    while ($row = $query->fetch_assoc()) {
        $data[] = $row['clientname'];
    }
    
    //return json data
    echo json_encode($data);
?>

PHP part : livepost.php:

[/php]
query(“SELECT * FROM livepost WHERE clientname LIKE ‘%”.$livesearch.”%’ ORDER BY clientname ASC”);
while ($row = $query->fetch_assoc()) {
$data[] = $row[‘clientname’];
}

//return json data
echo json_encode($data);
?>
[/php]

Example

I hope you have Got jquery autocomplete multiple fields with single auto-select request And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.

Also Read :  PHP Connection Mysql Database Steps

Leave a Reply

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