{"id":3660,"date":"2018-12-10T11:37:18","date_gmt":"2018-12-10T11:37:18","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=3660"},"modified":"2022-08-11T08:06:04","modified_gmt":"2022-08-11T08:06:04","slug":"jquery-ui-autocomplete-custom-dropdown-images-html-in-php","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\/","title":{"rendered":"jQuery UI Autocomplete with Images and Custom HTML in PHP"},"content":{"rendered":"<p>The <b>jQuery UI Autocomplete<\/b> plugin provides an instant way to add autocomplete suggestions feature to the textbox. It allows the user to quickly search and select a value from a pre-populated list. When the user starts typing in the input field, the Autocomplete plugin fetches the matched values and listed them under the textbox. You can easily integrate the <a href=\"https:\/\/www.codexworld.com\/autocomplete-textbox-using-jquery-php-mysql\/\">autocomplete textbox functionality using jQuery UI, PHP, and MySQL<\/a>.<\/p>\n<p>Generally, the Autocomplete widget fetch the values from the database and display the suggestions in text format under the input field. But, you can customize the autocomplete dropdown and suggestions list with custom HTML code. The custom autocomplete dropdown list is very useful when you want to maintain the design with the webpage layout. In this tutorial, we will show you how to add custom HTML and <b>show images and text in autocomplete<\/b> suggestions list dropdown using jQuery UI, PHP, and MySQL.<\/p>\n<p>In the example script, we will integrate an auto-suggestions textbox for members&#8217; search input, and display images and text in the autocomplete drop-down. <\/p>\n<ul class=\"bullet_disk_list\">\n<li>Autocomplete textbox to search the members by name.<\/li>\n<li>When the user starts typing in the input field, the matched members&#8217; data will be fetched from the database.<\/li>\n<li>The member&#8217;s data with name and image will be listed in the auto-suggestions dropdown.<\/li>\n<\/ul>\n<h2>Create Database Table<\/h2>\n<p>To store the autosuggestions data a table needs to be created in the database. The following SQL creates a <code>users<\/code> table with some basic fields in the MySQL database.<\/p>\n<pre><span style=\"color: rgb(149, 65, 33);\">CREATE<\/span> <span style=\"color: rgb(149, 65, 33);\">TABLE<\/span> <span style=\"color: rgb(33, 145, 97);\">`users`<\/span> (\r\n <span style=\"color: rgb(33, 145, 97);\">`id`<\/span> <span style=\"color: rgb(0, 134, 179);\">int<\/span>(<span style=\"color: rgb(64, 160, 112);\">11<\/span>) <span style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span style=\"color: rgb(149, 65, 33);\">NULL<\/span> AUTO_INCREMENT,\r\n <span style=\"color: rgb(33, 145, 97);\">`first_name`<\/span> <span style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span style=\"color: rgb(64, 160, 112);\">25<\/span>) <span style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n <span style=\"color: rgb(33, 145, 97);\">`last_name`<\/span> <span style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span style=\"color: rgb(64, 160, 112);\">25<\/span>) <span style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n <span style=\"color: rgb(33, 145, 97);\">`image`<\/span> <span style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span style=\"color: rgb(64, 160, 112);\">150<\/span>) <span style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n <span style=\"color: rgb(33, 145, 97);\">`created`<\/span> datetime <span style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n <span style=\"color: rgb(33, 145, 97);\">`modified`<\/span> datetime <span style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n <span style=\"color: rgb(33, 145, 97);\">`status`<\/span> tinyint(<span style=\"color: rgb(64, 160, 112);\">1<\/span>) <span style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span style=\"color: rgb(149, 65, 33);\">NULL<\/span> <span style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span style=\"color: rgb(33, 145, 97);\">'1'<\/span> <span style=\"color: rgb(149, 65, 33);\">COMMENT<\/span> <span style=\"color: rgb(33, 145, 97);\">'1=Active | 0=Inactive'<\/span>,\r\n PRIMARY <span style=\"color: rgb(149, 65, 33);\">KEY<\/span> (<span style=\"color: rgb(33, 145, 97);\">`id`<\/span>)\r\n) <span style=\"color: rgb(149, 65, 33);\">ENGINE<\/span>=<span style=\"color: rgb(149, 65, 33);\">InnoDB<\/span> <span style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span style=\"color: rgb(149, 65, 33);\">CHARSET<\/span>=utf8 <span style=\"color: rgb(149, 65, 33);\">COLLATE<\/span>=utf8_unicode_ci;<\/pre>\n<h2>Autocomplete Textbox<\/h2>\n<p><b>JavaScript Code:<\/b><br \/>\nInclude the jQuery and jQuery UI library files to use the Autocomplete plugin.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><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);\">\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.6.0\/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;!-- jQuery UI 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);\">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);\">\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.13.2\/themes\/smoothness\/jquery-ui.css\"<\/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);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.13.2\/jquery-ui.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><\/pre>\n<p>Use the <b>autocomplete()<\/b> method to initialize the jQuery UI Autocomplete plugin.<\/p>\n<ul class=\"bullet_disk_list\">\n<li><code>source<\/code> &#8211; Specify the path of the server-side script to fetch the dynamic data from the database.<\/li>\n<li><code>minLength<\/code> &#8211; The minimum number of characters the user must type to perform the search<\/li>\n<li><code>select<\/code> &#8211; This event is triggered when an item is selected from the suggestions dropdown.\n<ul>\n<li>On selecting an item, the value will be set to the autocomplete input field and user ID will be set to the hidden input field.<\/li>\n<\/ul>\n<\/li>\n<li><code>_renderItem<\/code> &#8211; The renderItem extension helps to customize the autocomplete widget.\n<ul>\n<li>Define a custom class for each item of the auto-suggestions list.<\/li>\n<li>Render the images and text with custom HTML in the suggestion list of the widget.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\"><span style=\"color: rgb(186, 98, 54);\">&lt;<span style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n$(<span style=\"color: rgb(182, 86, 17);\">document<\/span>).ready(<span><span style=\"color: rgb(184, 84, 212);\">function<\/span>(<span style=\"color: rgb(182, 86, 17);\"><\/span>)<\/span>{\r\n    $(<span style=\"color: rgb(96, 172, 57);\">\"#searchInput\"<\/span>).autocomplete({\r\n        source: <span style=\"color: rgb(96, 172, 57);\">\"fetchUsers.php\"<\/span>,\r\n        minLength: <span style=\"color: rgb(182, 86, 17);\">1<\/span>,\r\n        select: <span><span style=\"color: rgb(184, 84, 212);\">function<\/span>(<span style=\"color: rgb(182, 86, 17);\">event, ui<\/span>) <\/span>{\r\n            $(<span style=\"color: rgb(96, 172, 57);\">\"#searchInput\"<\/span>).val(ui.item.value);\r\n            $(<span style=\"color: rgb(96, 172, 57);\">\"#userID\"<\/span>).val(ui.item.id);\r\n        }\r\n    }).data(<span style=\"color: rgb(96, 172, 57);\">\"ui-autocomplete\"<\/span>)._renderItem = <span><span style=\"color: rgb(184, 84, 212);\">function<\/span>(<span style=\"color: rgb(182, 86, 17);\"> ul, item <\/span>) <\/span>{\r\n    <span style=\"color: rgb(184, 84, 212);\">return<\/span> $( <span style=\"color: rgb(96, 172, 57);\">\"&lt;li class='ui-autocomplete-row'&gt;&lt;\/li&gt;\"<\/span> )\r\n        .data( <span style=\"color: rgb(96, 172, 57);\">\"item.autocomplete\"<\/span>, item )\r\n        .append( item.label )\r\n        .appendTo( ul );\r\n    };\r\n});\r\n<span style=\"color: rgb(186, 98, 54);\">&lt;\/<span style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b>HTML Code:<\/b><br \/>\nDefine an HTML input element to attach the Autocomplete feature.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>When the user starts typing, the suggestions are retrieved from the server-side source, and autocomplete drop-down will appear under the input field.<\/li>\n<li>Once the user selects an item from the auto-suggestion list, the respective ID is assigned to a hidden input field (userID) for the form submission process.<\/li>\n<\/ul>\n<pre><span style=\"color: rgb(108, 107, 90);\">&lt;!-- Autocomplete input field --&gt;<\/span>\r\n<span style=\"color: rgb(186, 98, 54);\">&lt;<span style=\"color: rgb(186, 98, 54);\">input<\/span> <span>id<\/span>=<span style=\"color: rgb(125, 151, 38);\">\"searchInput\"<\/span> <span>placeholder<\/span>=<span style=\"color: rgb(125, 151, 38);\">\"Enter member name...\"<\/span> <span>autocomplete<\/span>=<span style=\"color: rgb(125, 151, 38);\">\"off\"<\/span>&gt;<\/span>\r\n\r\n<span style=\"color: rgb(108, 107, 90);\">&lt;!-- Hidden input to store selected user's ID --&gt;<\/span>  \r\n<span style=\"color: rgb(186, 98, 54);\">&lt;<span style=\"color: rgb(186, 98, 54);\">input<\/span> <span>type<\/span>=<span style=\"color: rgb(125, 151, 38);\">\"hidden\"<\/span> <span>id<\/span>=<span style=\"color: rgb(125, 151, 38);\">\"userID\"<\/span> <span>name<\/span>=<span style=\"color: rgb(125, 151, 38);\">\"userID\"<\/span> <span>value<\/span>=<span style=\"color: rgb(125, 151, 38);\">\"\"<\/span>\/&gt;<\/span><\/pre>\n<h2>Database Configuration (dbConfig.php)<\/h2>\n<p>The <code>dbConfig.php<\/code> file is used to connect and select the database. Specify the database host (<code>$dbHost<\/code>), username (<code>$dbUsername<\/code>), password (<code>$dbPassword<\/code>), and name (<code>$dbName<\/code>) as per your MySQL server credentials.<\/p>\n<pre><span style=\"color: #0000BB\">&lt;?php<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 \/>}<\/span><\/pre>\n<h2>Autocomplete Data with Images and Custom HTML (fetchUsers.php)<\/h2>\n<p>The <code>fetchUsers.php<\/code> is loaded by the autocomplete() method of the jQuery UI Autocomplete plugin.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>The <b>autocomplete()<\/b> method makes a GET request to the source URL (<code>fetchUsers.php<\/code>) and adds a term parameter in the query string. <\/li>\n<li>Use <b>PHP $_GET<\/b> method to retrieve the value of the search term.<\/li>\n<li>Fetch the matched user&#8217;s data (filter by search term) from the database (<code>users<\/code> table) using PHP and MySQL.<\/li>\n<li>Add user image, first name, and last name with HTML elements to the label.<\/li>\n<li>Generate an array with the filtered data.<\/li>\n<li>Render filtered users data in JSON format.<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Include&nbsp;database&nbsp;config&nbsp;file <br \/><\/span><span style=\"color: #007700\">require_once&nbsp;<\/span><span style=\"color: #DD0000\">'dbConfig.php'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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\">'term'<\/span><span style=\"color: #007700\">]; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Get&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: #DD0000\">\"SELECT&nbsp;id,&nbsp;first_name,&nbsp;last_name,&nbsp;image&nbsp;FROM&nbsp;users&nbsp;WHERE&nbsp;(first_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;OR&nbsp;last_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;first_name&nbsp;ASC\"<\/span><span style=\"color: #007700\">; <br \/><\/span><span style=\"color: #0000BB\">$result&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: #0000BB\">$query<\/span><span style=\"color: #007700\">); <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Generate&nbsp;array&nbsp;with&nbsp;user's&nbsp;data <br \/><\/span><span style=\"color: #0000BB\">$userData&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array(); <br \/>if(<\/span><span style=\"color: #0000BB\">$result<\/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\">$result<\/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\">$name&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'first_name'<\/span><span style=\"color: #007700\">].<\/span><span style=\"color: #DD0000\">'&nbsp;'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'last_name'<\/span><span style=\"color: #007700\">]; <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'id'<\/span><span style=\"color: #007700\">]&nbsp;&nbsp;&nbsp;&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'id'<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'value'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">$name<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'label'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">' <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a&nbsp;href=\"javascript:void(0);\"&gt; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;src=\"images\/users\/'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'image'<\/span><span style=\"color: #007700\">].<\/span><span style=\"color: #DD0000\">'\"&nbsp;width=\"50\"&nbsp;height=\"50\"\/&gt; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$name<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">'&lt;\/span&gt; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/a&gt; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">array_push<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$data<\/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\">$userData<\/span><span style=\"color: #007700\">); <br \/> <br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/autocomplete-multiselect-textbox-multiple-selection-jquery-php\/\">Autocomplete Textbox with Multiple Selection using jQuery in PHP<\/a><\/span><\/p>\n<h2>Conclusion<\/h2>\n<p>If you want to integrate autocomplete search input functionality, this <b>jQuery Autocomplete textbox<\/b> with images is very useful to make the search textbox user-friendly. The example code shows you to add images, text, and custom HTML in the autocomplete widget. You can easily extend this script to customize the autocomplete dropdown and render HTML elements. For the example of various configuration options of the jQuery UI Autocomplete plugin, see this tutorial &#8211; <a href=\"https:\/\/www.codexworld.com\/autocomplete-textbox-using-jquery-php-mysql\/\">Autocomplete Textbox using jQuery, PHP and MySQL<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The jQuery UI Autocomplete plugin provides an instant way to add autocomplete suggestions feature to the textbox. It allows the user to quickly search and select a value from a pre-populated list. When the user <\/p>\n","protected":false},"author":1,"featured_media":5029,"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,17,14],"class_list":["post-3660","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-autocomplete","tag-autocomplete-textbox","tag-jquery","tag-jquery-ui","tag-php","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>jQuery UI Autocomplete with Images and Custom HTML in PHP - CodexWorld<\/title>\n<meta name=\"description\" content=\"jQuery UI Autocomplete with images - Add text and images with custom HTML in autocomplete dropdown using jQuery UI, PHP, and MySQL. Show image and HTML content in autocomplete using jQuery and PHP.\" \/>\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\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery UI Autocomplete with Images and Custom HTML in PHP - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"jQuery UI Autocomplete with images - Add text and images with custom HTML in autocomplete dropdown using jQuery UI, PHP, and MySQL. Show image and HTML content in autocomplete using jQuery and PHP.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/jquery-ui-autocomplete-custom-dropdown-images-html-in-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-12-10T11:37:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-11T08:06:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/12\/jquery-ui-autocomplete-from-database-with-custom-dropdown-images-html-php-mysql-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\\\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"jQuery UI Autocomplete with Images and Custom HTML in PHP\",\"datePublished\":\"2018-12-10T11:37:18+00:00\",\"dateModified\":\"2022-08-11T08:06:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\\\/\"},\"wordCount\":666,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/jquery-ui-autocomplete-from-database-with-custom-dropdown-images-html-php-mysql-codexworld.png\",\"keywords\":[\"Autocomplete\",\"Autocomplete Textbox\",\"jQuery\",\"jQuery UI\",\"PHP\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\\\/\",\"name\":\"jQuery UI Autocomplete with Images and Custom HTML in PHP - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/jquery-ui-autocomplete-from-database-with-custom-dropdown-images-html-php-mysql-codexworld.png\",\"datePublished\":\"2018-12-10T11:37:18+00:00\",\"dateModified\":\"2022-08-11T08:06:04+00:00\",\"description\":\"jQuery UI Autocomplete with images - Add text and images with custom HTML in autocomplete dropdown using jQuery UI, PHP, and MySQL. Show image and HTML content in autocomplete using jQuery and PHP.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/jquery-ui-autocomplete-from-database-with-custom-dropdown-images-html-php-mysql-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/jquery-ui-autocomplete-from-database-with-custom-dropdown-images-html-php-mysql-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"jquery-ui-autocomplete-from-database-with-custom-dropdown-images-html-php-mysql-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery UI Autocomplete with Images and Custom HTML 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":"jQuery UI Autocomplete with Images and Custom HTML in PHP - CodexWorld","description":"jQuery UI Autocomplete with images - Add text and images with custom HTML in autocomplete dropdown using jQuery UI, PHP, and MySQL. Show image and HTML content in autocomplete using jQuery and PHP.","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\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\/","og_locale":"en_US","og_type":"article","og_title":"jQuery UI Autocomplete with Images and Custom HTML in PHP - CodexWorld","og_description":"jQuery UI Autocomplete with images - Add text and images with custom HTML in autocomplete dropdown using jQuery UI, PHP, and MySQL. Show image and HTML content in autocomplete using jQuery and PHP.","og_url":"https:\/\/www.codexworld.com\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2018-12-10T11:37:18+00:00","article_modified_time":"2022-08-11T08:06:04+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/12\/jquery-ui-autocomplete-from-database-with-custom-dropdown-images-html-php-mysql-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\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"jQuery UI Autocomplete with Images and Custom HTML in PHP","datePublished":"2018-12-10T11:37:18+00:00","dateModified":"2022-08-11T08:06:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\/"},"wordCount":666,"commentCount":3,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/12\/jquery-ui-autocomplete-from-database-with-custom-dropdown-images-html-php-mysql-codexworld.png","keywords":["Autocomplete","Autocomplete Textbox","jQuery","jQuery UI","PHP"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\/","url":"https:\/\/www.codexworld.com\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\/","name":"jQuery UI Autocomplete with Images and Custom HTML in PHP - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/12\/jquery-ui-autocomplete-from-database-with-custom-dropdown-images-html-php-mysql-codexworld.png","datePublished":"2018-12-10T11:37:18+00:00","dateModified":"2022-08-11T08:06:04+00:00","description":"jQuery UI Autocomplete with images - Add text and images with custom HTML in autocomplete dropdown using jQuery UI, PHP, and MySQL. Show image and HTML content in autocomplete using jQuery and PHP.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/12\/jquery-ui-autocomplete-from-database-with-custom-dropdown-images-html-php-mysql-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/12\/jquery-ui-autocomplete-from-database-with-custom-dropdown-images-html-php-mysql-codexworld.png","width":1366,"height":768,"caption":"jquery-ui-autocomplete-from-database-with-custom-dropdown-images-html-php-mysql-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/jquery-ui-autocomplete-custom-dropdown-images-html-in-php\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"jQuery UI Autocomplete with Images and Custom HTML 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\/12\/jquery-ui-autocomplete-from-database-with-custom-dropdown-images-html-php-mysql-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-X2","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3660","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=3660"}],"version-history":[{"count":4,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3660\/revisions"}],"predecessor-version":[{"id":5028,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3660\/revisions\/5028"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/5029"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=3660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=3660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=3660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}