{"id":1235,"date":"2016-02-01T18:56:16","date_gmt":"2016-02-01T18:56:16","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=1235"},"modified":"2016-04-22T16:27:31","modified_gmt":"2016-04-22T16:27:31","slug":"autocomplete-textbox-multiple-values-jquery-php-mysql","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/autocomplete-textbox-multiple-values-jquery-php-mysql\/","title":{"rendered":"Autocomplete Textbox with Multiple Values using jQuery, PHP and MySQL"},"content":{"rendered":"

In our previous jQuery UI Autocomplete tutorial<\/a>, we have shown how to display auto-suggestions from the database under the textbox in PHP. But it was for single selection. In this tutorial, you’ll learn how to implement autocomplete textbox with multiple values selection in PHP<\/b>. We’ll use jQuery UI Autocomplete to show the suggestions from the MySQL database and users would be able to select multiple values.<\/p>\n

Along with the autocomplete functionality, we’ll show how you can restrict the limitation on multiple values selection and get multiple values from multiple sources.<\/p>\n

jQuery UI & jQuery Library<\/h2>\n

At first, you should need to include the jQuery UI stylesheet, jQuery library, and jQuery UI library.<\/p>\n

<link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"\/\/code.jquery.com\/ui\/1.11.4\/themes\/smoothness\/jquery-ui.css\"<\/span>>\r\n<script<\/span> src<\/span>=\"\/\/code.jquery.com\/jquery-1.10.2.js\"<\/span>><\/script<\/span>>\r\n<script<\/span> src<\/span>=\"\/\/code.jquery.com\/ui\/1.11.4\/jquery-ui.js\"<\/span>><\/script<\/span>>\r\n<\/pre>\n
jQuery UI Autocomplete with Multiple Values<\/h2>\n
In this example, we’ll display a textbox for skills entry. Once the user starts writing skills, the autosuggestion skills would be listed under the textbox. These skills auto suggestion would be fetched from the skills<\/b> table of MySQL database in skills.php<\/code> file and returns Json data to source<\/code> option.<\/p>\n
JavaScript:<\/b>
\nThe selector (#skills<\/code>) of autocomplete function should match with the textbox ID and respective data source file should provide into source option.<\/p>\n
<script<\/span>>\r\n$<\/span>(function<\/span>() {\r\n    function<\/span> split<\/span>( val ) {\r\n        return<\/span> val.split<\/span>( \/,\\s<\/span>*\/<\/span> );\r\n    }\r\n    function<\/span> extractLast<\/span>( term ) {\r\n        return<\/span> split<\/span>( term ).pop<\/span>();\r\n    }\r\n    \r\n    $<\/span>( \"#skills\"<\/span> ).bind( \"keydown\"<\/span>, function<\/span>( event<\/span> ) {\r\n        if<\/span> ( event<\/span>.keyCode ===<\/span> $<\/span>.ui.keyCode.TAB &<\/span>&<\/span>\r\n            $<\/span>( this<\/span> ).autocomplete( \"instance\"<\/span> ).menu.active ) {\r\n            event<\/span>.preventDefault();\r\n        }\r\n    })\r\n    .autocomplete({\r\n        minLength: 1<\/span>,\r\n        source<\/span>: function<\/span>( request, response ) {\r\n            \/\/ delegate back to autocomplete, but extract the last term<\/span>\r\n            $<\/span>.getJSON(\"skills.php\"<\/span>, { term : extractLast( request.term )},response);\r\n        },\r\n        focus<\/span>: function<\/span>() {\r\n            \/\/ prevent value inserted on focus<\/span>\r\n            return<\/span> false<\/span>;\r\n        },\r\n        select<\/span>: function<\/span>( event, ui ) {\r\n            var<\/span> terms =<\/span> split<\/span>( this<\/span>.value<\/span> );\r\n            \/\/ remove the current input<\/span>\r\n            terms.pop<\/span>();\r\n            \/\/ add the selected item<\/span>\r\n            terms.push<\/span>( ui.item.value<\/span> );\r\n            \/\/ add placeholder to get the comma-and-space at the end<\/span>\r\n            terms.push<\/span>( \"\"<\/span> );\r\n            this<\/span>.value<\/span> =<\/span> terms.join<\/span>( \", \"<\/span> );\r\n            return<\/span> false<\/span>;\r\n        }\r\n    });\r\n});\r\n<\/script<\/span>>\r\n<\/pre>\n
HTML:<\/b>
\nTextbox ID should be matched with the selector of autocomplete function.<\/p>\n
<label<\/span> for<\/span>=\"skills\"<\/span>>Tag your skills: <\/label<\/span>>\r\n<input<\/span> id<\/span>=<\/span>\"skills\"<\/span> size<\/span>=\"50\"<\/span>>\r\n<\/pre>\n
jQuery UI Autocomplete Limit on Multiple Values<\/h2>\n
The functionality of this example is same as the previous example, we only add one extra functionality on it. We’ll add a restriction on multiple selections. If the user exceeds the limitation of selection, extra values would be removed from the textbox.<\/p>\n
For adding limitation, place the following JavaScript in select event. Here we have added the limit of 3, you can change it as per your need.<\/p>\n
select<\/span>: function<\/span>( event, ui ) {\r\n    var<\/span> terms =<\/span> split<\/span>( this<\/span>.value<\/span> );\r\n    if<\/span>(terms.length<\/span> <=<\/span> 3<\/span>) {\r\n        \/\/ remove the current input<\/span>\r\n        terms.pop<\/span>();\r\n        \/\/ add the selected item<\/span>\r\n        terms.push<\/span>( ui.item.value<\/span> );\r\n        \/\/ add placeholder to get the comma-and-space at the end<\/span>\r\n        terms.push<\/span>( \"\"<\/span> );\r\n        this<\/span>.value<\/span> =<\/span> terms.join<\/span>( \", \"<\/span> );\r\n        return<\/span> false<\/span>;\r\n    }else<\/span>{\r\n        var<\/span> last =<\/span> terms.pop<\/span>();\r\n        $<\/span>(this<\/span>).val<\/span>(this<\/span>.value<\/span>.substr<\/span>(0<\/span>, this<\/span>.value<\/span>.length<\/span> -<\/span> last.length<\/span> -<\/span> 2<\/span>)); \/\/ removes text from input<\/span>\r\n        $<\/span>(this<\/span>).effect(\"highlight\"<\/span>, {}, 1000<\/span>);\r\n        $<\/span>(this<\/span>).attr<\/span>(\"style\"<\/span>,\"border: solid 1px red;\"<\/span>);\r\n        return<\/span> false<\/span>;\r\n    }\r\n}\r\n<\/pre>\n
jQuery UI Autocomplete with Multiple Values from Different Sources<\/h2>\n
This example shows how to provide autocomplete from the different source file. Degrees auto-suggestion will be displayed at the time of first value selection and skills auto-suggestion will be displayed from the second values selection.<\/p>\n
Place the following JavaScript in source option. Here you can see first autocomplete is getting from degrees.php<\/code> source and second autocomplete is getting from skills.php<\/code> source.<\/p>\n
source<\/span>: function<\/span>( request, response ) {\r\n    var<\/span> terms =<\/span> split<\/span>( request.term );\r\n    if<\/span> (terms.length<\/span> <<\/span> 2<\/span>) {\r\n      $<\/span>.getJSON<\/span>(\"degrees.php\"<\/span>, { term : extractLast( request.term )},response);\r\n    }else<\/span>{\r\n       $<\/span>.getJSON<\/span>(\"skills.php\"<\/span>, { term : extractLast( request.term )},response);\r\n    }\r\n}\r\n<\/pre>\n
Source Files<\/h2>\n
We can get the textbox value by term field ($_GET['term']<\/code>) from the query string. We will fetch the data from skills<\/b> or degrees<\/b> table and filtering the skills or degrees by $_GET['term']<\/code>. Filtered data would be returned as JSON format.<\/p>\n
skills.php<\/code>:<\/b><\/p>\n
<?php
    <\/span>\/\/database configuration
    <\/span>$dbHost <\/span>= <\/span>'localhost'<\/span>;
    <\/span>$dbUsername <\/span>= <\/span>'root'<\/span>;
    <\/span>$dbPassword <\/span>= <\/span>''<\/span>;
    <\/span>$dbName <\/span>= <\/span>'codexworld'<\/span>;
    
    <\/span>\/\/connect with the database
    <\/span>$db <\/span>= new <\/span>mysqli<\/span>(<\/span>$dbHost<\/span>,<\/span>$dbUsername<\/span>,<\/span>$dbPassword<\/span>,<\/span>$dbName<\/span>);
    
    <\/span>\/\/get search term
    <\/span>$searchTerm <\/span>= <\/span>$_GET<\/span>[<\/span>'term'<\/span>];
    
    <\/span>\/\/get matched data from skills table
    <\/span>$query <\/span>= <\/span>$db<\/span>-><\/span>query<\/span>(<\/span>\"SELECT * FROM skills WHERE name LIKE '%\"<\/span>.<\/span>$searchTerm<\/span>.<\/span>\"%' ORDER BY name ASC\"<\/span>);
    while (<\/span>$row <\/span>= <\/span>$query<\/span>-><\/span>fetch_assoc<\/span>()) {
        <\/span>$data<\/span>[] = <\/span>$row<\/span>[<\/span>'name'<\/span>];
    }
    
    <\/span>\/\/return json data
    <\/span>echo <\/span>json_encode<\/span>(<\/span>$data<\/span>);
<\/span>?><\/span><\/pre>\n
degrees.php<\/code>:<\/b><\/p>\n
<?php
    <\/span>\/\/database configuration
    <\/span>$dbHost <\/span>= <\/span>'localhost'<\/span>;
    <\/span>$dbUsername <\/span>= <\/span>'root'<\/span>;
    <\/span>$dbPassword <\/span>= <\/span>''<\/span>;
    <\/span>$dbName <\/span>= <\/span>'codexworld'<\/span>;
    
    <\/span>\/\/connect with the database
    <\/span>$db <\/span>= new <\/span>mysqli<\/span>(<\/span>$dbHost<\/span>,<\/span>$dbUsername<\/span>,<\/span>$dbPassword<\/span>,<\/span>$dbName<\/span>);
    
    <\/span>\/\/get search term
    <\/span>$searchTerm <\/span>= <\/span>$_GET<\/span>[<\/span>'term'<\/span>];
    
    <\/span>\/\/get matched data from skills table
    <\/span>$query <\/span>= <\/span>$db<\/span>-><\/span>query<\/span>(<\/span>\"SELECT * FROM degrees WHERE name LIKE '%\"<\/span>.<\/span>$searchTerm<\/span>.<\/span>\"%' ORDER BY name ASC\"<\/span>);
    while (<\/span>$row <\/span>= <\/span>$query<\/span>-><\/span>fetch_assoc<\/span>()) {
        <\/span>$data<\/span>[] = <\/span>$row<\/span>[<\/span>'name'<\/span>];
    }
    
    <\/span>\/\/return json data
    <\/span>echo <\/span>json_encode<\/span>(<\/span>$data<\/span>);
<\/span>?><\/span><\/pre>\n
Conclusion<\/h2>\n
We’ve covered most required jQuery autocomplete functionalities. Using these functionalities, you can extend jQuery UI autocomplete and implement advanced autocomplete in your web project. If you know any other advanced functionality of jQuery UI autocomplete, you can share with us by commenting here.<\/p>\n","protected":false},"excerpt":{"rendered":"
In our previous jQuery UI Autocomplete tutorial, we have shown how to display auto-suggestions from the database under the textbox in PHP. But it was for single selection. In this tutorial, you’ll learn how to <\/p>\n","protected":false},"author":1,"featured_media":1237,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[20,18,16,17,19,14],"class_list":["post-1235","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-autocomplete-search","tag-autocomplete-textbox","tag-jquery","tag-jquery-ui","tag-mysql","tag-php","cat-6-id","has_thumb"],"yoast_head":"\nAutocomplete Textbox with Multiple Values using jQuery, PHP and MySQL - CodexWorld<\/title>\n<meta name=\"description\" content=\"Autocomplete textbox with multiple values in PHP - Learn how to implement autocomplete textbox with multiple values using jQuery, PHP and MySQL.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/autocomplete-textbox-multiple-values-jquery-php-mysql\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Autocomplete Textbox with Multiple Values using jQuery, PHP and MySQL - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Autocomplete textbox with multiple values in PHP - Learn how to implement autocomplete textbox with multiple values using jQuery, PHP and MySQL.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/autocomplete-textbox-multiple-values-jquery-php-mysql\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2016-02-01T18:56:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-04-22T16:27:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/02\/autocomplete-textbox-with-multiple-values-using-jquery-php-mysql-by-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-textbox-multiple-values-jquery-php-mysql\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-textbox-multiple-values-jquery-php-mysql\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Autocomplete Textbox with Multiple Values using jQuery, PHP and MySQL\",\"datePublished\":\"2016-02-01T18:56:16+00:00\",\"dateModified\":\"2016-04-22T16:27:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-textbox-multiple-values-jquery-php-mysql\\\/\"},\"wordCount\":440,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-textbox-multiple-values-jquery-php-mysql\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/02\\\/autocomplete-textbox-with-multiple-values-using-jquery-php-mysql-by-codexworld.png\",\"keywords\":[\"Autocomplete Search\",\"Autocomplete Textbox\",\"jQuery\",\"jQuery UI\",\"MySQL\",\"PHP\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-textbox-multiple-values-jquery-php-mysql\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-textbox-multiple-values-jquery-php-mysql\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-textbox-multiple-values-jquery-php-mysql\\\/\",\"name\":\"Autocomplete Textbox with Multiple Values using jQuery, PHP and MySQL - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-textbox-multiple-values-jquery-php-mysql\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-textbox-multiple-values-jquery-php-mysql\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/02\\\/autocomplete-textbox-with-multiple-values-using-jquery-php-mysql-by-codexworld.png\",\"datePublished\":\"2016-02-01T18:56:16+00:00\",\"dateModified\":\"2016-04-22T16:27:31+00:00\",\"description\":\"Autocomplete textbox with multiple values in PHP - Learn how to implement autocomplete textbox with multiple values using jQuery, PHP and MySQL.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-textbox-multiple-values-jquery-php-mysql\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-textbox-multiple-values-jquery-php-mysql\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-textbox-multiple-values-jquery-php-mysql\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/02\\\/autocomplete-textbox-with-multiple-values-using-jquery-php-mysql-by-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/02\\\/autocomplete-textbox-with-multiple-values-using-jquery-php-mysql-by-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"autocomplete-textbox-with-multiple-values-using-jquery-php-mysql-by-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-textbox-multiple-values-jquery-php-mysql\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Autocomplete Textbox with Multiple Values using jQuery, PHP and MySQL\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web & Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Autocomplete Textbox with Multiple Values using jQuery, PHP and MySQL - CodexWorld","description":"Autocomplete textbox with multiple values in PHP - Learn how to implement autocomplete textbox with multiple values using jQuery, PHP and MySQL.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/autocomplete-textbox-multiple-values-jquery-php-mysql\/","og_locale":"en_US","og_type":"article","og_title":"Autocomplete Textbox with Multiple Values using jQuery, PHP and MySQL - CodexWorld","og_description":"Autocomplete textbox with multiple values in PHP - Learn how to implement autocomplete textbox with multiple values using jQuery, PHP and MySQL.","og_url":"https:\/\/www.codexworld.com\/autocomplete-textbox-multiple-values-jquery-php-mysql\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2016-02-01T18:56:16+00:00","article_modified_time":"2016-04-22T16:27:31+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/02\/autocomplete-textbox-with-multiple-values-using-jquery-php-mysql-by-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/autocomplete-textbox-multiple-values-jquery-php-mysql\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/autocomplete-textbox-multiple-values-jquery-php-mysql\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Autocomplete Textbox with Multiple Values using jQuery, PHP and MySQL","datePublished":"2016-02-01T18:56:16+00:00","dateModified":"2016-04-22T16:27:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/autocomplete-textbox-multiple-values-jquery-php-mysql\/"},"wordCount":440,"commentCount":5,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/autocomplete-textbox-multiple-values-jquery-php-mysql\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/02\/autocomplete-textbox-with-multiple-values-using-jquery-php-mysql-by-codexworld.png","keywords":["Autocomplete Search","Autocomplete Textbox","jQuery","jQuery UI","MySQL","PHP"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/autocomplete-textbox-multiple-values-jquery-php-mysql\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/autocomplete-textbox-multiple-values-jquery-php-mysql\/","url":"https:\/\/www.codexworld.com\/autocomplete-textbox-multiple-values-jquery-php-mysql\/","name":"Autocomplete Textbox with Multiple Values using jQuery, PHP and MySQL - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/autocomplete-textbox-multiple-values-jquery-php-mysql\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/autocomplete-textbox-multiple-values-jquery-php-mysql\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/02\/autocomplete-textbox-with-multiple-values-using-jquery-php-mysql-by-codexworld.png","datePublished":"2016-02-01T18:56:16+00:00","dateModified":"2016-04-22T16:27:31+00:00","description":"Autocomplete textbox with multiple values in PHP - Learn how to implement autocomplete textbox with multiple values using jQuery, PHP and MySQL.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/autocomplete-textbox-multiple-values-jquery-php-mysql\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/autocomplete-textbox-multiple-values-jquery-php-mysql\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/autocomplete-textbox-multiple-values-jquery-php-mysql\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/02\/autocomplete-textbox-with-multiple-values-using-jquery-php-mysql-by-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/02\/autocomplete-textbox-with-multiple-values-using-jquery-php-mysql-by-codexworld.png","width":1366,"height":768,"caption":"autocomplete-textbox-with-multiple-values-using-jquery-php-mysql-by-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/autocomplete-textbox-multiple-values-jquery-php-mysql\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Autocomplete Textbox with Multiple Values using jQuery, PHP and MySQL"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web & Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/02\/autocomplete-textbox-with-multiple-values-using-jquery-php-mysql-by-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-jV","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=1235"}],"version-history":[{"count":5,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1235\/revisions"}],"predecessor-version":[{"id":1241,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1235\/revisions\/1241"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/1237"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=1235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=1235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=1235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}