I am making custom autocomplete search box. When my customer starts typing the first letter of a product name, I need to show all products which have that letter in their name. Same logic applies as he continues to type the whole product name. ( I hope my goal is clear)

I added the search box in my page like this:

<form class="search">
        <input id="products" name="products" type="text" />


I included scripts in my header.php like this:

    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="//netsh.pp.ua/upwork-demo/1/js/typeahead.js"></script>

I added script into my footer.php like this:

        $(document).ready(function() {

                name: 'products',
                remote: 'products.php?query=%QUERY'



I made mysql.php file in which I make connection to my mysql database and select query like this:


define ('DBSERVER', 'here I put server name');
define ('DBUSER', 'here I put user name');
define ('DBPASS','here I put password');
define ('DBNAME','here I put database name');

$connection = mysqli_connect(DBSERVER, DBUSER, DBPASS) or die("Can't connect to server. Please check credentials and try again");
$result = mysqli_select_db(DBNAME) or die("Can't select database. Please check DB name and try again");

if (isset($_REQUEST['query'])) {
    $query = $_REQUEST['query'];
    $sql = mysqli_query ("SELECT post_title FROM wp_posts WHERE post_title LIKE '%{$query}%' AND post_type LIKE '%{$query}%'");
    $array = array();
    while ($row = mysqli_fetch_array($sql)) {
        $array[] = array (
            'label' => $row['post_title'].', '.$row['post_type'],
            'value' => $row['post_title'],
    echo json_encode ($array);


I put mysql.php to root folder. But when I start typing into search box, it doesn't act as autocomplete at all.

  • Hi Nancy, fantastic explanation of what you have tried and how you have gone about it, hope you get many +++ for making the effort. I dont want to turn you away, but think, by me giving you this url to look at you will learn more yourself by it, than trying to get someone to do it for you. Take a look at how the autocomplete is done here, especially the database connect. If you still fail after rading, by all means come back davidnash.com.au/create-an-auto-complete-field-in-wordpress
    – Malisa
    Sep 14, 2016 at 11:37
  • "what to do" is not a real question as the answer is simply "debug your code". It is kind of obvious at least one problem in your code but I am going to be a little paternalist and say that it is probably will be more useful for you to learn how to debug ajax by yourself using browser tools, than getting an answer for this specific question. Side note, never do such things as your mysql.php in wordpress, this will likely end bad (but probably not the cause for your current problem)\ Sep 14, 2016 at 11:39
  • 1
    @MarkKaplun - thank you for the reply. As this is the first time ever I had to make this happen, I did do my best with my current knowledge to make it work and I am failing. That's why I asked question here, it wasn't just a lazy try in getting the job done for me. People do learn new things here too, I guess. Good point about mysql.php. Since the error is not obvious to me, I will try and debug it myself. Thanx again, anyway.
    – Nancy
    Sep 14, 2016 at 11:51
  • @Malisa - thank you for the link, i will look it up in order to get this resolved.
    – Nancy
    Sep 14, 2016 at 11:52
  • 1
    that is cool. Maybe I should have said "learn how to debug ajax" and leave him with that, but I do tend to get overly verbose from time to time (about every 5 minutes ;) ) @Malisa Sep 14, 2016 at 12:02


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.