{"id":3625,"date":"2018-11-27T06:22:07","date_gmt":"2018-11-27T06:22:07","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=3625"},"modified":"2022-08-19T11:19:22","modified_gmt":"2022-08-19T11:19:22","slug":"autocomplete-multiselect-textbox-multiple-selection-jquery-php","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\/","title":{"rendered":"Autocomplete Textbox with Multiple Selection using jQuery in PHP"},"content":{"rendered":"<p><b>Autocomplete Textbox<\/b> displays the suggestions under the input field to allow the user to select a value from the pre-populated values list. It helps the user to find and select a desired value from the auto-populated suggestions. When the user typing in the textbox, the respective data is fetched from the database and shown the suggestions in the dropdown under the textbox. You can easily make the text input field user-friendly by adding autocomplete feature textbox using <a href=\"https:\/\/www.codexworld.com\/autocomplete-textbox-using-jquery-php-mysql\/\">jQuery UI Autocomplete plugin in PHP<\/a>.<\/p>\n<p>Generally, the autocomplete input field allows selecting one value from the auto-suggestions list. But if you want to select multiple values, the multi-select option needs to be implemented in the autocomplete textbox. In this tutorial, we will show you how to add autocomplete textbox and allow the user to select multiple items from the dynamic predefined list using jQuery with PHP and MySQL.<\/p>\n<p>In the example script, we will create a autocomplete input field to search skills data from the database.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>HTML input field to search skills.<\/li>\n<li>Fetch the matched skills from the server-side script while the user starts typing in the textbox.<\/li>\n<li>List the dynamic values under the input field.<\/li>\n<li>Allow multiple selections from the auto-suggestions dropdown.<\/li>\n<\/ul>\n<h2>Create Database Table<\/h2>\n<p>A table needs to be created in the database to store the auto-suggestions data. The following SQL creates a <code>skills<\/code> table in the MySQL database.<\/p>\n<pre style=\"color: rgb(0, 0, 0);\"><span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">CREATE<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">TABLE<\/span> <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`skills`<\/span> (\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`id`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">int<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">11<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span> AUTO_INCREMENT,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`name`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">100<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`status`<\/span> tinyint(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">1<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">1<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COMMENT<\/span> <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">'1=Active | 0=Inactive'<\/span>,\r\n  PRIMARY <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">KEY<\/span> (<span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`id`<\/span>)\r\n) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">ENGINE<\/span>=<span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">InnoDB<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">CHARSET<\/span>=utf8 <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span>=utf8_unicode_ci;<\/pre>\n<h2>Autocomplete Textbox with Multiple Selection<\/h2>\n<p><b>HTML Input Field:<\/b><br \/>\nDefine an input element where autocomplete feature will be attached.<\/p>\n<pre><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"text\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"skill_input\"<\/span>\/&gt;<\/span><\/pre>\n<p><b>jQuery Tokeninput Plugin:<\/b><br \/>\nWe will use the jQuery Tokeninput plugin to add autocomplete feature to the input field. At first, include the jQuery and Tokeninput library files.<\/p>\n<pre><span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- jQuery library --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"js\/jquery.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Tokeninput plugin library --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"js\/jquery.tokeninput.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"css\/token-input.css\"<\/span> \/&gt;<\/span><\/pre>\n<p>Initialize and attach the Tokeninput to input field using <code>tokenInput()<\/code> method. Also, specify the server-side script URL to fetch the data from the database.<\/p>\n<pre><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n$(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>).ready(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#skill_input\"<\/span>).tokenInput(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"fetchData.php\"<\/span>);\r\n});\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<h2>Fetch Autocomplete Data with PHP and MySQL (fetchData.php)<\/h2>\n<p>A server-side script needed to generate the auto-suggestions data based on the search request. This <code>fetchData.php<\/code> file generates the search results and sends to the <b>tokenInput()<\/b> method for the autocomplete list.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Connect to the MySQL database.<\/li>\n<li>Get the search term with the GET parameter named q.<\/li>\n<li>Fetch matched data from the database based on the search term using PHP and MySQL.<\/li>\n<li>Generate an array of search results data.<\/li>\n<li>Render the search results in JSON format.<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Database&nbsp;configuration <br \/><\/span><span style=\"color: #0000BB\">$dbHost&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"localhost\"<\/span><span style=\"color: #007700\">; <br \/><\/span><span style=\"color: #0000BB\">$dbUsername&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"root\"<\/span><span style=\"color: #007700\">; <br \/><\/span><span style=\"color: #0000BB\">$dbPassword&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"root\"<\/span><span style=\"color: #007700\">; <br \/><\/span><span style=\"color: #0000BB\">$dbName&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"codexworld\"<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Create&nbsp;database&nbsp;connection <br \/><\/span><span style=\"color: #0000BB\">$db&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;new&nbsp;<\/span><span style=\"color: #0000BB\">mysqli<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$dbHost<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbUsername<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbPassword<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbName<\/span><span style=\"color: #007700\">); <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Check&nbsp;connection <br \/><\/span><span style=\"color: #007700\">if&nbsp;(<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">connect_error<\/span><span style=\"color: #007700\">)&nbsp;{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;die(<\/span><span style=\"color: #DD0000\">\"Connection&nbsp;failed:&nbsp;\"&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">connect_error<\/span><span style=\"color: #007700\">); <br \/>} <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Get&nbsp;search&nbsp;term <br \/><\/span><span style=\"color: #0000BB\">$searchTerm&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_GET<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'q'<\/span><span style=\"color: #007700\">]; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Fetch&nbsp;matched&nbsp;data&nbsp;from&nbsp;the&nbsp;database <br \/><\/span><span style=\"color: #0000BB\">$query&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">query<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"SELECT&nbsp;id,&nbsp;name&nbsp;FROM&nbsp;skills&nbsp;WHERE&nbsp;name&nbsp;LIKE&nbsp;'%\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$searchTerm<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"%'&nbsp;AND&nbsp;status&nbsp;=&nbsp;1&nbsp;ORDER&nbsp;BY&nbsp;name&nbsp;ASC\"<\/span><span style=\"color: #007700\">); <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Generate&nbsp;array&nbsp;with&nbsp;skills&nbsp;data <br \/><\/span><span style=\"color: #0000BB\">$skillData&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array(); <br \/>if(<\/span><span style=\"color: #0000BB\">$query<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">num_rows&nbsp;<\/span><span style=\"color: #007700\">&gt;&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;while(<\/span><span style=\"color: #0000BB\">$row&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$query<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">fetch_assoc<\/span><span style=\"color: #007700\">()){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$skillData<\/span><span style=\"color: #007700\">[]&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>} <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Return&nbsp;results&nbsp;as&nbsp;json&nbsp;encoded&nbsp;array <br \/><\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$skillData<\/span><span style=\"color: #007700\">); <br \/> <br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<p>The jQuery Tokeninput plugin provides various configuration options to customize the autocomplete multiselect textbox. Some of the most useful configuration options for multiple select autocomplete are given below.<\/p>\n<h2>Autocomplete Multiselect with Custom Labels<\/h2>\n<p>You can specify the custom labels for the hint, no result, and searching text.<\/p>\n<pre><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n$(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>).ready(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#skill_input\"<\/span>).tokenInput(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"fetchData.php\"<\/span>, {\r\n        hintText: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Type your skills...\"<\/span>,\r\n        noResultsText: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Skill not found.\"<\/span>,\r\n        searchingText: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Searching...\"<\/span>\r\n    });\r\n});\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<h2>Autocomplete Multiselect with Custom Delete Icon<\/h2>\n<p>Use <code>deleteText<\/code> option to specify a custom image for delete link. If you wish to hide the delete link, provide an empty string in deleteText.<\/p>\n<pre><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n$(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>).ready(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#skill_input\"<\/span>).tokenInput(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"fetchData.php\"<\/span>, {\r\n        deleteText: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"&amp;#x2603;\"<\/span>\r\n    });\r\n});\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<h2>Search and Token Limit in Autocomplete Multiselect<\/h2>\n<p>Use minChars and tokenLimit to set the limit on search and token.<\/p>\n<ul class=\"bullet_disk_list\">\n<li><code>minChars<\/code> &#8211; Specify the minimum number of characters the user must enter before a search is performed.<\/li>\n<li><code>tokenLimit<\/code> &#8211; Specify the maximum number of results allowed to be selected by the user.<\/li>\n<\/ul>\n<pre><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n$(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>).ready(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#skill_input\"<\/span>).tokenInput(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"fetchData.php\"<\/span>, {\r\n        minChars: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">3<\/span>,\r\n        tokenLimit: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">2<\/span>\r\n    });\r\n});\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<h2>Modify Response in Autocomplete Multiselect<\/h2>\n<p>You can use <code>onResult<\/code> callback function to modify the response back from the server before shown to the user.<\/p>\n<pre><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n$(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>).ready(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#skill_input\"<\/span>).tokenInput(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"fetchData.php\"<\/span>, {\r\n        onResult: <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">results<\/span>)<\/span>{\r\n            $.each(results, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> (<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">index, value<\/span>) <\/span>{\r\n                value.name = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"CODEX: \"<\/span> + value.name;\r\n            });\r\n\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span> results;\r\n        }\r\n    });\r\n});\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<h2>Get Selected Value from Autocomplete Multiselect<\/h2>\n<p>Now, we will show you how to get the selected multiple values from the <b>Autocomplete Multiselect textbox in PHP<\/b>.<\/p>\n<p>At first, create an HTML form and place the autocomplete input field into it.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Specify the HTTP method in the <code>method<\/code> attribute.<\/li>\n<li>Specify the file path of the server-side in <code>action<\/code> attribute.<\/li>\n<li>Add a submit button to the form.<\/li>\n<\/ul>\n<pre><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">form<\/span> <span class=\"hljs-attr\">method<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"post\"<\/span> <span class=\"hljs-attr\">action<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"submit.php\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"text\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"skill_input\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"skill_input\"<\/span>\/&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"submit\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"submit\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"SUBMIT\"<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">form<\/span>&gt;<\/span><\/pre>\n<p>In the server-side script (<code>submit.php<\/code>), use the <b>PHP $_POST<\/b> method to get the selected values.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>When the form is submitted, the values of the autocomplete multi-select textbox is posted in this script.<\/li>\n<li>You will get the IDs of the selected items as a comma (,) separated string.<\/li>\n<li>Use the <b>explode() in PHP<\/b> to convert ids string to an array.<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php<br \/><br \/><\/span><span style=\"color: #007700\">if(isset(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'submit'<\/span><span style=\"color: #007700\">])){<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Get&nbsp;selected&nbsp;skills<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$selected_skills_ids&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'skill_input'<\/span><span style=\"color: #007700\">];<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Convert&nbsp;skills&nbsp;ids&nbsp;string&nbsp;to&nbsp;array<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$selected_skills_arr&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">explode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">','<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$selected_skills_ids<\/span><span style=\"color: #007700\">);<br \/>}<br \/><br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/autocomplete-textbox-multiple-values-jquery-php-mysql\/\">Autocomplete Textbox with Multiple Values using jQuery, PHP and MySQL<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Autocomplete Textbox displays the suggestions under the input field to allow the user to select a value from the pre-populated values list. It helps the user to find and select a desired value from the <\/p>\n","protected":false},"author":1,"featured_media":5036,"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":[317,18,16,19,14,299],"class_list":["post-3625","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-autocomplete","tag-autocomplete-textbox","tag-jquery","tag-mysql","tag-php","tag-plugin","cat-6-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Autocomplete Textbox with Multiple Selection using jQuery in PHP - CodexWorld<\/title>\n<meta name=\"description\" content=\"Autocomplete Textbox - jQuery autocomplete textbox with multiple selection in PHP. Fetch auto-suggestions data from the database and get the selected value using 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-multiselect-textbox-multiple-selection-jquery-php\/\" \/>\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 Selection using jQuery in PHP - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Autocomplete Textbox - jQuery autocomplete textbox with multiple selection in PHP. Fetch auto-suggestions data from the database and get the selected value using PHP and MySQL.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\/\" \/>\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=\"2018-11-27T06:22:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-19T11:19:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/11\/autocomplete-textbox-multiselect-multiple-selection-using-jquery-php-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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Autocomplete Textbox with Multiple Selection using jQuery in PHP\",\"datePublished\":\"2018-11-27T06:22:07+00:00\",\"dateModified\":\"2022-08-19T11:19:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\\\/\"},\"wordCount\":666,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/autocomplete-textbox-multiselect-multiple-selection-using-jquery-php-codexworld.png\",\"keywords\":[\"Autocomplete\",\"Autocomplete Textbox\",\"jQuery\",\"MySQL\",\"PHP\",\"Plugin\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\\\/\",\"name\":\"Autocomplete Textbox with Multiple Selection using jQuery in PHP - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/autocomplete-textbox-multiselect-multiple-selection-using-jquery-php-codexworld.png\",\"datePublished\":\"2018-11-27T06:22:07+00:00\",\"dateModified\":\"2022-08-19T11:19:22+00:00\",\"description\":\"Autocomplete Textbox - jQuery autocomplete textbox with multiple selection in PHP. Fetch auto-suggestions data from the database and get the selected value using PHP and MySQL.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/autocomplete-textbox-multiselect-multiple-selection-using-jquery-php-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/autocomplete-textbox-multiselect-multiple-selection-using-jquery-php-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"autocomplete-textbox-multiselect-multiple-selection-using-jquery-php-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Autocomplete Textbox with Multiple Selection using jQuery in PHP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; 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 Selection using jQuery in PHP - CodexWorld","description":"Autocomplete Textbox - jQuery autocomplete textbox with multiple selection in PHP. Fetch auto-suggestions data from the database and get the selected value using 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-multiselect-textbox-multiple-selection-jquery-php\/","og_locale":"en_US","og_type":"article","og_title":"Autocomplete Textbox with Multiple Selection using jQuery in PHP - CodexWorld","og_description":"Autocomplete Textbox - jQuery autocomplete textbox with multiple selection in PHP. Fetch auto-suggestions data from the database and get the selected value using PHP and MySQL.","og_url":"https:\/\/www.codexworld.com\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2018-11-27T06:22:07+00:00","article_modified_time":"2022-08-19T11:19:22+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/11\/autocomplete-textbox-multiselect-multiple-selection-using-jquery-php-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":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Autocomplete Textbox with Multiple Selection using jQuery in PHP","datePublished":"2018-11-27T06:22:07+00:00","dateModified":"2022-08-19T11:19:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\/"},"wordCount":666,"commentCount":0,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/11\/autocomplete-textbox-multiselect-multiple-selection-using-jquery-php-codexworld.png","keywords":["Autocomplete","Autocomplete Textbox","jQuery","MySQL","PHP","Plugin"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\/","url":"https:\/\/www.codexworld.com\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\/","name":"Autocomplete Textbox with Multiple Selection using jQuery in PHP - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/11\/autocomplete-textbox-multiselect-multiple-selection-using-jquery-php-codexworld.png","datePublished":"2018-11-27T06:22:07+00:00","dateModified":"2022-08-19T11:19:22+00:00","description":"Autocomplete Textbox - jQuery autocomplete textbox with multiple selection in PHP. Fetch auto-suggestions data from the database and get the selected value using PHP and MySQL.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/11\/autocomplete-textbox-multiselect-multiple-selection-using-jquery-php-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/11\/autocomplete-textbox-multiselect-multiple-selection-using-jquery-php-codexworld.png","width":1366,"height":768,"caption":"autocomplete-textbox-multiselect-multiple-selection-using-jquery-php-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Autocomplete Textbox with Multiple Selection using jQuery in PHP"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; 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\/2018\/11\/autocomplete-textbox-multiselect-multiple-selection-using-jquery-php-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-Wt","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3625","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=3625"}],"version-history":[{"count":3,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3625\/revisions"}],"predecessor-version":[{"id":5035,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3625\/revisions\/5035"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/5036"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=3625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=3625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=3625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}