I went through a bunch of iterations with this a couple years ago and didn’t get it working.<\/p>\n
This is the second one I tried recently and was able to get what I wanted for hyperlinked results.<\/p>\n
https:\/\/www.codingcage.com\/2016\/12\/autocomplete-search-with-href-link-php.html\n\n<\/pre>\ncode blobs for posterity:<\/p>\n
database:<\/p>\n
--\n-- Database: `codingcage`\n--\n\n-- --------------------------------------------------------\n\n--\n-- Table structure for table `tbl_posts`\n--\n\nCREATE TABLE IF NOT EXISTS `tbl_posts` (\n `postID` int(11) NOT NULL AUTO_INCREMENT,\n `postTitle` varchar(255) NOT NULL,\n `postUrl` varchar(255) NOT NULL,\n PRIMARY KEY (`postID`)\n) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;\n\n--\n-- Dumping data for table `tbl_posts`\n--\n\nINSERT INTO `tbl_posts` (`postID`, `postTitle`, `postUrl`) VALUES\n(1, 'Simple jQuery Add, Update, Delete with PHP and MySQL', 'http:\/\/goo.gl\/IL6NTr'),\n(2, '15 Free Bootstrap Admin Themes Demo and Download', 'http:\/\/goo.gl\/1dBwEy'),\n(3, 'Easy Ajax Image Upload with jQuery, PHP', 'http:\/\/goo.gl\/jXZ6LY'),\n(4, 'How to Send HTML Format eMails in PHP using PHPMailer', 'http:\/\/goo.gl\/kQrzJP'),\n(5, 'Ajax Bootstrap Signup Form with jQuery PHP and MySQL', 'http:\/\/goo.gl\/yxKrha'),\n(6, 'Submit PHP Form without Page Refresh using jQuery, Ajax', 'http:\/\/goo.gl\/14vlBe'),\n(7, 'How to Convert MySQL Rows into JSON Format in PHP', 'http:\/\/goo.gl\/qgOiwB'),\n(8, 'Designing Bootstrap Signup Form with jQuery Validation', 'http:\/\/goo.gl\/nECERc'),\n(9, 'Upload, Insert, Update, Delete an Image using PHP MySQL', 'http:\/\/goo.gl\/HRJrDD'),\n(10, 'Login Registration with Email Verification, Forgot Password using PHP', 'http:\/\/goo.gl\/O9FKN1');<\/code><\/pre>\nphp:<\/p>\n
<?php\n \n $DBhost = \"localhost\";\n $DBuser = \"root\";\n $DBpass = \"\";\n $DBname = \"codingcage\";\n \n try {\n $DBcon = new PDO(\"mysql:host=$DBhost;dbname=$DBname\",$DBuser,$DBpass);\n } catch(PDOException $ex){\n die($ex->getMessage());\n }<\/code><\/pre>\n$keyword = trim($_REQUEST['term']); \/\/ this is user input\n\n $sugg_json = array(); \/\/ this is for displaying json data as a autosearch suggestion\n $json_row = array(); \/\/ this is for stroring mysql results in json string\n \n\n $keyword = preg_replace('\/\\s+\/', ' ', $keyword); \/\/ it will replace multiple spaces from the input.\n\n $query = 'SELECT postID, postTitle, postUrl FROM tbl_posts WHERE postTitle LIKE :term'; \/\/ select query\n \n $stmt = $DBcon->prepare( $query );\n $stmt->execute(array(':term'=>\"%$keyword%\"));\n \n if ( $stmt->rowCount()>0 ) {\n \n while($recResult = $stmt->fetch(PDO::FETCH_ASSOC)) {\n $json_row[\"id\"] = $recResult['postUrl'];\n $json_row[\"value\"] = $recResult['postTitle'];\n $json_row[\"label\"] = $recResult['postTitle'];\n array_push($sugg_json, $json_row);\n }\n \n } else {\n $json_row[\"id\"] = \"#\";\n $json_row[\"value\"] = \"\";\n $json_row[\"label\"] = \"Nothing Found!\";\n array_push($sugg_json, $json_row);\n }\n \n $jsonOutput = json_encode($sugg_json, JSON_UNESCAPED_SLASHES); \n print $jsonOutput;<\/code><\/pre>\nhtml:<\/p>\n
<!DOCTYPE html>\n<html>\n<head>\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/>\n<meta name=\"viewport\" content=\"initial-scale=1.0, maximum-scale=2.0\">\n<title>AutoComplete Example in PHP MySQL<\/title>\n<link rel=\"stylesheet\" href=\"bootstrap\/css\/bootstrap.min.css\">\n<link rel=\"stylesheet\" href=\"http:\/\/code.jquery.com\/ui\/1.12.1\/themes\/base\/jquery-ui.css\">\n<\/head>\n\n<body>\n\n <div class=\"container\">\n \n <div class=\"page-header\">\n <h3 style=\"color:#00a2d1; font-size:30px; font-family: Impact, Charcoal, sans-serif; text-align: center;\">AutoComplete Search with Href Link in PHP MySQL<\/h3>\n <\/div>\n \n <div class=\"row\">\n \n <div class=\"col-lg-12 text-center\">\n \n <div class=\"col-lg-offset-2\">\n <form>\n <div class=\"form-group\">\n <div class=\"input-group\">\n <input id=\"txtSearch\" class=\"form-control input-lg\" type=\"text\" placeholder=\"Search for PHP, MySQL, Ajax and jQuery\" \/>\n <div class=\"input-group-addon\"><i class=\"glyphicon glyphicon-search\"><\/i><\/div>\n <\/div>\n <\/div>\n <\/form> \n <\/div> \n \n <\/div>\n \n <\/div>\n \n <\/div>\n\n<script src=\"https:\/\/code.jquery.com\/jquery-1.12.4.js\"><\/script>\n<script src=\"https:\/\/code.jquery.com\/ui\/1.12.1\/jquery-ui.js\"><\/script>\n<script src=\"bootstrap\/js\/bootstrap.min.js\"><\/script>\n\n<script>\n$(document).ready(function(){\n \n $('#txtSearch').autocomplete({\n source: \"post_search.php\",\n minLength: 2,\n select: function(event, ui) {\n var url = ui.item.id;\n if (url != '#') {\n location.href = url\n }\n },\n open: function(event, ui) {\n $(\".ui-autocomplete\").css(\"z-index\", 1000)\n }\n })\n \n}); \n<\/script>\n\n<\/body>\n<\/html><\/code><\/pre>\n
\nThis site was the first one that I got working – but I wasn’t happy with using it for hyperlinked results.<\/p>\n
https:\/\/codeforgeek.com\/ajax-search-box-php-mysql\/<\/pre>\ncode blobs for posterity:<\/p>\n
<\/p>\n
WARNING: sanitize your input and prevent code injection attacks<\/p>\n
html file:<\/p>\n
\n<html<\/span>><\/span>\n\u00a0 <head<\/span>><\/span>\n\u00a0 \u00a0 <title<\/span>><\/span>Ajax Search Box using PHP and MySQL<\/<\/span>ti<\/span>tle<\/span>><\/span>\n\u00a0 \u00a0 <script<\/span>src<\/span>=<\/span>\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.1\/jquery.min.js\"<\/span>><\/span> \u00a0 \u00a0 \u00a0 \u00a0<\/<\/span>script<\/span>><\/span>\n\u00a0 \u00a0 \u00a0<script<\/span> src<\/span>=<\/span>\"typeahead.min.js\"<\/span>><\/<\/span>script<\/span>><\/span>\n\u00a0 <\/<\/span>head<\/span>><\/span>\n\u00a0 <body<\/span>><\/span>\n\u00a0 <input<\/span>type<\/span>=<\/span>\"text\"<\/span> name<\/span>=<\/span>\"typeahead\"<\/span>><\/span>\n\u00a0 <\/<\/span>body<\/span>><\/span>\n\n\n <<\/span>script><\/span>\n\u00a0 \u00a0 $(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n \u00a0 $(<\/span>'input.typeahead'<\/span>)<\/span>.typeahead<\/span>(<\/span>{<\/span>\n\u00a0 \u00a0 \u00a0 name:<\/span> 'typeahead'<\/span>,<\/span>\n\u00a0 \u00a0 \u00a0 remote:<\/span>'search.php?key=%QUERY'<\/span>,<\/span>\n\u00a0 \u00a0 \u00a0 limit :<\/span> 10<\/span>\n\u00a0 \u00a0 }<\/span>)<\/span>;<\/span>\n }<\/span>)<\/span>;<\/span>\n <\/script>\n<\/html<\/span>><\/span>\n<\/span><\/pre>\n<\/div>\n<\/div>\nsearch.php:<\/div>\n<?php\n $key<\/span>=<\/span>$_GET<\/span>[<\/span>'key'<\/span>]<\/span>;<\/span>\n\u00a0 \u00a0 $array<\/span> =<\/span> array<\/span>(<\/span>)<\/span>;<\/span>\n\u00a0 \u00a0 $con<\/span>=<\/span>mysqli_connect<\/span>(<\/span>\"localhost\"<\/span>,<\/span>\"root\"<\/span>,<\/span>\"\"<\/span>,<\/span>\"demos\"<\/span>)<\/span>;<\/span>\n\u00a0 \u00a0 $query<\/span>=<\/span>mysqli_query<\/span>(<\/span>$con<\/span>,<\/span> \"select * from cfg_demos where title LIKE '%{$key}<\/span>%'\"<\/span>)<\/span>;<\/span>\n\u00a0 \u00a0 while<\/span>(<\/span>$row<\/span>=<\/span>mysqli_fetch_assoc<\/span>(<\/span>$query<\/span>)<\/span>)<\/span>\n\u00a0 \u00a0 {<\/span>\n\u00a0 \u00a0 \u00a0 $array<\/span>[<\/span>]<\/span> =<\/span> $row<\/span>[<\/span>'title'<\/span>]<\/span>;<\/span>\n\u00a0 \u00a0 }<\/span>\n\u00a0 \u00a0 echo<\/span> json_encode<\/span>(<\/span>$array<\/span>)<\/span>;<\/span>\n\u00a0 \u00a0 mysqli_close<\/span>(<\/span>$con<\/span>)<\/span>;<\/span>\n?><\/span><\/span>\n<\/pre>\n","protected":false},"excerpt":{"rendered":"I went through a bunch of iterations with this a couple years ago and didn’t get it working. This is the second one I tried recently and was able to get what I wanted for hyperlinked results. https:\/\/www.codingcage.com\/2016\/12\/autocomplete-search-with-href-link-php.html code blobs for posterity: database: — — Database: `codingcage` — — ——————————————————– […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[62,63,90,104,124],"class_list":["post-394","post","type-post","status-publish","format-standard","hentry","category-rln","tag-javascript","tag-json","tag-mysql","tag-php","tag-search"],"_links":{"self":[{"href":"https:\/\/randomlinuxnotes.d13.com\/index.php?rest_route=\/wp\/v2\/posts\/394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomlinuxnotes.d13.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomlinuxnotes.d13.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomlinuxnotes.d13.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/randomlinuxnotes.d13.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=394"}],"version-history":[{"count":0,"href":"https:\/\/randomlinuxnotes.d13.com\/index.php?rest_route=\/wp\/v2\/posts\/394\/revisions"}],"wp:attachment":[{"href":"https:\/\/randomlinuxnotes.d13.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomlinuxnotes.d13.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomlinuxnotes.d13.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}