Querying all Categories in Autocomplete

Let me preface this is by saying that the website I am going to be talking about is a WordPress site. Its purpose is to serve as a directory for a variety of business types (doctors, lawyers, realtors, etc).

Now with that out of the way, here’s the issue:

A month ago, a colleague of mine and I posted on his account a question asking on StackOverflow if someone could help us implement a live autosuggestion feature on one of our theme’s existing search bar. Here is the link for that: https://stackoverflow.com/questions/49040586/implementing-autocomplete-on-a-wordpress-site-php-jquery

The person that helped us was extremely generous and essentially built a solid amount of Javascript in order to create the feature and it was splendid, but…there was one problem.

The problem was that we only could query based off of a letter. What I mean by that is, is we couldn’t query every single doctor category unless it had the letter “a” for instance, or “abc”.

What we wanted is that when you pick “Doctor” in the first search box, that all Doctor categories would show up in the 3rd search box, and never had to even worry about querying based off of a letter or anything for that matter. The program should know that once we have “Doctor” selected in the first search box, that all subcategories of Doctor should show up.

There are 4 components to the query. It starts from the custom Javsacript code on the website where we find the third ‘search box’, and then call the autosearch function to search. Here it is:

document.getElementById(“search_keywords”).onkeyup= function() {
var firstCat = document.getElementById(“search_categories”);
var valCat = firstCat.options[firstCat.selectedIndex].value;
listingsLiveSearch(this.value, valCat);
}
document.getElementById(“search_keywords”).onclick= function() {
var firstCat = document.getElementById(“search_categories”);
var valCat = firstCat.options[firstCat.selectedIndex].value;
listingsLiveSearch(“a”, valCat);
}

The second part is the custom Javascript code, located here where you’ll find the ‘listingsLiveSearch()’ function: https://pastebin.com/NUFAqtFy

The third part is the php files calling the XML files, where each category (doctors, lawyers, etc.) have their own php file and XML file. Here is the php file called of when you click on doctor:

<?php
//This PHP file is reponsible for accessing its associated xml document and
creating divs for each item if they match the user’s entered text.
$xmlDoc = new DOMDocument();
$xmlDoc->load(“links_Doctor.xml”);

$x=$xmlDoc->getElementsByTagName(‘link’);

//get the q parameter from URL
$q=$_GET[“q”];

//lookup all links from the xml file if length of q>0
if (strlen($q)>0) {
$hint=””;
for($i=0; $i<($x->length); $i++) {
$y=$x->item($i)->getElementsByTagName(‘title’);
$z=$x->item($i)->getElementsByTagName(‘url’);
if ($y->item(0)->nodeType==1) {
//find a link matching the search text
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
if ($hint==””) {
$hint=”<a href='” .
$z->item(0)->childNodes->item(0)->nodeValue .
“‘ target=’_blank’>” .
$y->item(0)->childNodes->item(0)->nodeValue . “</a>”;
} else {
$hint=$hint . “<br /><a href='” .
$z->item(0)->childNodes->item(0)->nodeValue .
“‘ target=’_blank’>” .
$y->item(0)->childNodes->item(0)->nodeValue . “</a>”;
}
}
}
}
}

// Set output to “no suggestion” if no hint was found
// or to the correct values
if (($hint==””)) {
$response=”No Suggestions Found”;
} else {
$response=$hint;
}

//output the response
echo $response;
?>

Here is an example of the XML for the doctor category which contains a list of all the subcategories:

<pages>

<link>
<title>Acupuncture</title>
<url>https://www.visitblue.com/listing-category/acupuncture</url>
</link>

<link>
<title>Bariatric Surgery</title>
<url>https://www.visitblue.com/listing-category/bariatric-surgery</url>
</link>

<link>
<title>Cardiology</title>
<url>https://www.visitblue.com/listing-category/cardiology</url>
</link>

<link>
<title>Chiropractic Physical Therapy</title>
<url>https://www.visitblue.com/listing-category/chiropractic-physical-therapy</url>
</link>

<link>
<title>Cosmetic Specialist</title>
<url>https://www.visitblue.com/listing-category/cosmetic-specialist</url>
</link>

<link>
<title>Dentistry</title>
<url>https://www.visitblue.com/listing-category/dentistry</url>
</link>

<link>
<title>Family Medicine</title>
<url>https://www.visitblue.com/listing-category/family-medicine</url>
</link>

<link>
<title>Fertility</title>
<url>visitblue.com/listing-category/fertility</url>
</link>

<link>
<title>General Surgery</title>
<url>https://www.visitblue.com/listing-category/general-surgery</url>
</link>

<link>
<title>Gynecology</title>
<url>https://www.visitblue.com/listing-category/gynecology</url>
</link>

<link>
<title>Internal Medicine</title>
<url>https://www.visitblue.com/listing-category/internal-medicine</url>
</link>

<link>
<title>Lasik</title>
<url>https://www.visitblue.com/listing-category/lasik</url>
</link>

<link>
<title>Medical Imaging</title>
<url>https://www.visitblue.com/listing-category/medical-imaging</url>
</link>

<link>
<title>Neurology</title>
<url>https://www.visitblue.com/listing-category/neurology</url>
</link>

<link>
<title>Neurosurgery</title>
<url>https://www.visitblue.com/listing-category/neurosurgery</url>
</link>

<link>
<title>Optometry</title>
<url>https://www.visitblue.com/listing-category/optometry</url>
</link>

<link>
<title>Orthopaedic Surgery</title>
<url>https://www.visitblue.com/listing-category/orthopedic-surgery</url>
</link>

<link>
<title>Orthopaedics</title>
<url>https://www.visitblue.com/listing-category/orthopedics</url>
</link>

<link>
<title>Pain Management</title>
<url>https://www.visitblue.com/listing-category/pain-management</url>
</link>

<link>
<title>Pediatric Dentistry</title>
<url>https://www.visitblue.com/listing-category/pediatric-dentistry</url>
</link>

<link>
<title>Pediatrics</title>
<url>https://www.visitblue.com/listing-category/pediatrics</url>
</link>

<link>
<title>Pharmacy</title>
<url>https://www.visitblue.com/listing-category/pharmacy</url>
</link>

<link>
<title>Plastic Surgery</title>
<url>https://www.visitblue.com/listing-category/plastic-surgery</url>
</link>

<link>
<title>Podiatry</title>
<url>https://www.visitblue.com/listing-category/podiatry</url>
</link>

<link>
<title>Psychotherapy</title>
<url>https://www.visitblue.com/listing-category/psychotherapy</url>
</link>

<link>
<title>Sleep Apnea</title>
<url>https://www.visitblue.com/listing-category/sleep-apnea</url>
</link>

<link>
<title>Spine Care</title>
<url>https://www.visitblue.com/listing-category/spine-care</url>
</link>

<link>
<title>Spine Surgery</title>
<url>https://www.visitblue.com/listing-category/spine-surgery</url>
</link>

<link>
<title>Urgent Care</title>
<url>https://www.visitblue.com/listing-category/urgent-care</url>
</link>

<link>
<title>Urology</title>
<url>https://www.visitblue.com/listing-category/urology</url>
</link>

</pages>

If you’re wondering why there’s a link in the XML files, originally we had it where when you click on the search suggestion it would take you automatically to the page but then we changed it so the links are arbitrary.

Read more here:: Querying all Categories in Autocomplete

Leave a Reply

Your email address will not be published. Required fields are marked *