Core Web Blog

Keep up to date with CoreSolutions

  • Web
  • Posted

Adding Autocomplete To Your Searches

Autocomplete is a feature that’s been around for a while. We’ve seen this in sites like Amazon, Google and YouTube – try entering the letters ‘st’ in Amazon’s search field, and you’ll get a list of suggestions including Star Wars, Steve Jobs, Star Trek, etc. It’s a pretty cool addition to a search page, and it turns out that it’s not terribly difficult to do – there are prebuilt Javascript libraries that allow you to do it. I mentioned JQuery in a previous post, so that’s what I’ll use to demonstrate.

Lets assume you’ve got a simple HTML page containing an input field with an id of ‘search’ that you want to add autocompete functionality to. In the header of your page, you’d add the following code:

$(function() {
$( “#search” ).autocomplete({
source: “name_search.php”
});
});

In this code, we are calling the JQuery UI function autocomplete on the ‘search’ input field on the webpage. In the function, we are specifying an option called ‘source’ – this is required; it is specifying the list of items that are available for your autocomplete. There are a couple of ways that you can specify this :

  • a Javascript Array with local data
  • a String, specifying a URL
  • a Javascript function that creates the list

In the example above, I’ve created a simple PHP page that queries a MySQL database to get the list of names; the autocomplete function will pass the user’s input to the page as a get variable called term, so the query to the database would look something like this:

$query = “select id, name from names where name like ‘”. $_GET['term'] . “%’”;

That’s just a basic example, there are additional options that you can use to customize things; for more details you can look at the JQuery UI documentation here.

 

Leave a comment

CoreSolutions Logo

London Office:
1-1615 N Routledge Park
London, ON N6H 5L6

Toronto Office:
2425 Matheson Blvd East
7th Floor
Mississauga, ON L4W 5K4

Toll Free: (800) 650-8882
London: (519) 641-7727
Toronto: (416) 410-8649
Email: This email address is being protected from spambots. You need JavaScript enabled to view it.

SUBSCRIBE

Click the 'Subscribe' button to sign up for news & software tips.

Beyond Software

Copyright © 2018 CoreSolutions Software, Inc. All Rights Reserved