Author Topic: Add a Google style suggest input box using entries from your database  (Read 12721 times)

0 Members and 1 Guest are viewing this topic.

Offline Jason

  • Administrator
  • Hero Member
  • *****
  • Posts: 1018
    • slipdex
Hi All,

I got the original code for this from http://www.enjoyxstudy.com/javascript/suggest/index.en.html and I modified how it can be used with the scripts to make it very dynamic. You can find my zipped files here: http://www.yourwebsitesupport.com/JQuery_library/suggest.zip.

Here it goes:

1. Unzip the file package and load the suggest.js file to your server where you keep your other external js files. (I create a directory called "js")
2. Take the list_products.htm file, open it in a text editor and simply change the field name ([[pn]]) to whatever field in your database you wish to pull.
3. In your csvread.pl file, scroll to the #Advanced Setting Multi-template section and add the list_products.htm file as an additional template. (I call my template "lp", and my script uses 'tmp' instead of 'mytemplate') ((That is simply a trick to get your URLs shorter))
4. Open the suggest.htm file in a text editor and edit the location of your suggest.js file. (Line 36 in my code)
5. Change the script that calls to your list_product.htm template to point to your correct template file. (Line 37 in my code) Most of yours will look like this:
Code: [Select]
<script type="text/javascript" src="http://www.yourdomain.com/cgi-bin/csvread.pl?mytemplate=lp&records=500"></script>6. Upload the remaining files and you are ready to go!

A couple things to keep in mind; you have to give the text box you want the suggestions to go to an ID. In my example I gave the text box id="text". You can give it any ID you wish, but make sure you change the in-code javascript to reflect the id value. On line 40 of my code in suggest.htm "text" is listed after the local variable call.

Here is a working example. I took a product list from a site I designed that sells racing and off road tires and wheels: http://yourwebsitesupport.com/JQuery_library/suggest.htm

I'm currently working on a way to get the script to handle only the start of the characters typed as it pertains to the field data in the database. I will update that when I have the resolution.

Jason
Founder of www.slipdex.com

Offline Jason

  • Administrator
  • Hero Member
  • *****
  • Posts: 1018
    • slipdex
Re: Add a Google style suggest input box using entries from your database
« Reply #1 on: December 11, 2014, 11:01:28 AM »
As an update to this topic I have added code that will remove duplicates from your database entries.

http://yourwebsitesupport.com/JQuery_library/suggest/suggest.zip

Working demo: http://yourwebsitesupport.com/JQuery_library/suggest/suggest.htm

Jason
« Last Edit: December 11, 2014, 12:48:39 PM by Jason »
Founder of www.slipdex.com