Posted inTechnology / Ajax / CSS / JavaScript / jQuery / Mysql / Mysqli / php / Programming

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




HTML markup Part(index.html)



JavaScript Part (index.js)


$(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;
        }
    });
});

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);
    }
}

PHP part : proglist.php:

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:

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);
?>

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.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

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

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype