Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Jquery UI Autocomplete search box


acidvertigo

Recommended Posts

I'll have a look at this tommorow again, in the autocomplete.php "term" would definately need changing to "keywords" I think offhand for this to work on 2.2rc2a

 

This also needs the jquery ui dependencies.

 

Hello, "term" is the keyword that jquery ui autocomplete pass to the database query. So id="term" is needed to the script to work.

 

Example if you search "OSCOM" the url will be http://www.mysite.com/catalog/autocomplete.php?term=OSCOM

 

 

For RC2A you need to download the jquery and jquery ui scripts and put them in every page in the catalog folder like this in the <head> section of your site:

 

<link type="text/css" href="css/themename/jquery-ui-1.8.9.custom.css" rel="Stylesheet" />	
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>

 

in catalog/includes/header.php you can put the following initializing code for the script:

 

 

<script>

$(function() {
$("#search").autocomplete({
                       source: "autocomplete.php",
                       minLength: 2,
                       select: function(event, ui) {
                       }
               });

});
</script>

 

Finally in /catalog/includes/boxes/search.php

 

 

find

 

'text' => tep_draw_input_field('keywords', '', 'size="10" maxlength="30" style="width: ' . (BOX_WIDTH-30) . 'px"') . ' ' . tep_hide_session_id() . tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH) . '<br>' . BOX_SEARCH_TEXT . '<br><a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '"><b>' . BOX_SEARCH_ADVANCED_SEARCH . '</b></a>');

 

change to:

 

'text' => tep_draw_input_field('keywords', '', 'size="10" id="search" maxlength="30" style="width: ' . (BOX_WIDTH-30) . 'px"') . ' ' . tep_hide_session_id() . tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH) . '<br>' . BOX_SEARCH_TEXT . '<br><a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '"><b>' . BOX_SEARCH_ADVANCED_SEARCH . '</b></a>');

 

Let me know if it works :)

Link to comment
Share on other sites

Hey, thank you I just tried it and it works perfect!! Very good mod! Thanks ;)

 

Can you post what you did? can you post link to download the jquery and jquery ui script? i can't get it to work, i have my search box setup on the top of my site, i.e. not in the column search box, is it possible to make it work? Thank you.

Edited by ptt81
Link to comment
Share on other sites

Can you post what you did? can you post link to download the jquery and jquery ui script? i can't get it to work, i have my search box setup on the top of my site, i.e. not in the column search box, is it possible to make it work? Thank you.

 

Jquery ui: http://jqueryui.com/download

Jquery: http://docs.jquery.com/Downloading_jQuery#Download_jQuery

 

 

It's possible to make it work on search on top by adding id="search" at your search <INPUT> form

Link to comment
Share on other sites

Sounds interesting.

 

I got the categories name to show in the searchresults dropdown easily, the only issue is to not have it in the search box when it is selected? Any ideas?

 

$fetch = tep_db_query("SELECT
                      p.products_id,
                      pd.products_name,
                      p2c.categories_id
                      FROM
                      " . TABLE_PRODUCTS . " p,
                      " . TABLE_PRODUCTS_DESCRIPTION . " pd,
                      " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c
                      WHERE
                      p.products_id = pd.products_id
                      AND
                      pd.language_id = '" . (int)$languages_id . "'
                      AND
                      p.products_id = p2c.products_id
                      AND pd.products_name like '%" . tep_db_input($_GET['term']) . "%'
                      ORDER BY
                      pd.products_name
                      LIMIT 0, 10");


while ($row = mysql_fetch_assoc($fetch)) { 
 array_push($return_arr, sprintf(SEARCH_RESULT, $row['products_name'], tep_get_category_name($row['categories_id'])));
}

 

new function includes/functions/general.php;

 

 function tep_get_category_name($category_id, $language = '') {
   global $languages_id;

   if (empty($language)) $language = $languages_id;

   $category_query = tep_db_query("select categories_name from " . TABLE_CATEGORIES_DESCRIPTION . " where categories_id = '" . (int)$category_id . "' and language_id = '" . (int)$language . "'");
   $category = tep_db_fetch_array($category_query);

   return $category['categories_name'];
 }

 

New language define /includes/languages/english.php

 

define('SEARCH_RESULT', '%s, found in %s');

 

I changed your code to:

 

 

while ($row = mysql_fetch_assoc($fetch)) { 
 array_push($return_arr, $row['products_name']), tep_get_category_name($row

['categories_id']));
}

 

and now it shows the cateories name, but the query seems to have a strange beahaviour. If a type a category name it doesn't show, but if i type a product name the name of the category appear.

Link to comment
Share on other sites

 

<link type="text/css" href="css/themename/jquery-ui-1.8.9.custom.css" rel="Stylesheet" />

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>

 

 

 

Just to let you know that I got it working on a 2.2 install with your instructions, the only difference was that I had to put the css file in the root of the css folder e.g.

 

<link type="text/css" href="css/jquery-ui-1.8.9.custom.css" rel="Stylesheet" />       
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>

 

Thanks

 

Dave

Link to comment
Share on other sites

I have my box code like this, the box show but the autocomplete does not work at all, i have tried the 2.2 codes method above including putting the css in the css root. Please help.

 

<div style="text-align: center;"><?php echo tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get') . tep_draw_input_field('keywords', '', 'size="10"  id="search" maxlength="30" style="width: 50%"') . ' ' . tep_draw_hidden_field('search_in_description', '1') . tep_hide_session_id() . tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH) . '<br />' . BOX_SEARCH_ADVANCED_SEARCH . '<br /><a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '"><strong>' . BOX_SEARCH_ADVANCED_SEARCH . '</strong></a>';?>
</form></div></div>

Edited by ptt81
Link to comment
Share on other sites

Hi there

 

What i did to get it to work initially was to add this code to includes/header.php just above the first line of html

 


<link type="text/css" href="css/jquery-ui-1.8.9.custom.css" rel="Stylesheet" />       
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<script>

$(function() {
$("#search").autocomplete({
                       source: "autocomplete.php",
                       minLength: 2,
                       select: function(event, ui) {
                       }
               });

});
</script>

 

 

Its a rough way to get it to work as it should be in between the <head> and </head> of the page but it works. Ive since moved it into my header tags so that it is in the right place.

 

I have a heavily modified store so the line numbers wont be the same as yours, so just before

 

}
?>

 

and just before

 

<table width="xxx" border="0" cellpadding="0" cellspacing="0">
 <tr>

 

on mine its around line 70 but that may be a lot less for you

 

Hope that helps

 

Dave

Link to comment
Share on other sites

I have the display categories displaying to be seems ok, but I have the disable categories mod installed.

 

When I add some code not to display disabled categories it breaks.

 

Any ideas what's wrong?

 

<?php

require('includes/application_top.php');

$return_arr = array();

$fetch = tep_db_query("SELECT
                      p.products_id,
                      pd.products_name,
                      p2c.categories_id,
	       c.categories_status
                      FROM
                      " . TABLE_PRODUCTS . " p,
                      " . TABLE_PRODUCTS_DESCRIPTION . " pd,
                      " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c
	       " . TABLE_CATEGORIES . " p2c
                      WHERE
                      p.products_id = pd.products_id
                      AND
                      pd.language_id = '" . (int)$languages_id . "'
                      AND
                      p.products_id = p2c.products_id
                      AND pd.products_name like '%" . tep_db_input($_GET['term']) . "%'
	       AND 
	       c.categories_status = '1'
                      ORDER BY					   
                      pd.products_name
                      LIMIT 0, 10");



while ($row = mysql_fetch_assoc($fetch)) { 
 array_push($return_arr, $row['products_name'], tep_get_category_name($row['categories_id']));
}

print json_encode($return_arr); 


?>

Link to comment
Share on other sites

still can't get it to work, anyone has problem with script error in IE8? Btw, im using oscMax, which is a modified version of 2.2, i dont have a header.php file so all script and css go into main_page.tpl.php instead however it still doesn't seem to work.

 

Webpage error details

 

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)

Timestamp: Sat, 29 Jan 2011 03:41:09 UTC

 

 

Message: Object doesn't support this property or method

Line: 515

Char: 1

Code: 0

Edited by ptt81
Link to comment
Share on other sites

I sort of have it working with this code, but it takes a long time to display and it just repeats a load of products.

 

So basically it doesnt work :D

 

<?php

require('includes/application_top.php');

$return_arr = array();

$fetch = tep_db_query("SELECT
                      p.products_id,
                      pd.products_name,
                      p2c.categories_id,
                      c.categories_status
                      FROM
                      " . TABLE_PRODUCTS . " p,
                      " . TABLE_PRODUCTS_DESCRIPTION . " pd,
                      " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c,
                      " . TABLE_CATEGORIES . " c
                      WHERE
                      p.products_id = pd.products_id
                      AND
                      pd.language_id = '" . (int)$languages_id . "'
                      AND
                      p.products_id = p2c.products_id
                      AND pd.products_name like '%" . tep_db_input($_GET['term']) . "%'
                      AND 
                      c.categories_status = '1'
                      ORDER BY                                    
                      pd.products_name
                      LIMIT 0, 20");



while ($row = mysql_fetch_assoc($fetch)) { 
 array_push($return_arr, $row['products_name'], tep_get_category_name($row['categories_id']));
}

print json_encode($return_arr); 


?>

Link to comment
Share on other sites

sorry but i dont know what i else i can d to help.

 

I no expert, just a hacker, but whats the URL?

 

Hey Thanks i got it to work, it was some conflict with my other Jquery scripts. However in IE8 the display box of the name list is narrow no matter how you set it in the CSS, any idea to fix this? it looks fine in Firefox.

 

I also found another Ajax searchsuggest contribution: http://addons.oscommerce.com/info/4144

 

This one can output a list of name and actual link to the product that when you click on it goes to the product, can it be done with this one? It would be neat, i like this one better for its simplicity.

Edited by ptt81
Link to comment
Share on other sites

Glad you got it working.

 

I just found a similar thing to you, it was stopping my 3D secure thickbox from appearing on my payment page as it was clashing with some other script:(

 

I never did manage to get the other contribution to work on my site, but I like the idea of the results being links rather than just populating the box.

 

All the best

 

Dave

Link to comment
Share on other sites

  • 1 year later...

I put search box in the header,and add the autocompelte feature to it,when I enter 2 letters in the search box,then a long list containing these two letter appear,but when I select one of them,this action does not fire any action,can not automatically produce search page on the select product.If I just use autocomplete search only ,when I select one product from the autocomplete list,it will automatically produce search page on the select product.I don't know how to modify it to make it work.

 

Joe

Link to comment
Share on other sites

  • 3 weeks later...

Hi,

 

Can anyone please help?

 

I had Jquery UI Autocomplete search box installed,

it works completely fine with localhost,

but when I upload on to my remote server,

the fuction just doesn't work at all.

 

when you type the key word in, nothing comes up.

 

Additional question,

how can I modify the background of the pop up result?

 

the default is white with white background,

if I change to black background, it also show black,

I like to make it the main page background is black

and the pop up list with white background

 

thanks

 

ce7

Link to comment
Share on other sites

  • 3 months later...

Does this contributions have some limitations?

I have around 2000 active products and 1000 inactive. I only get an autocomplete list when I type in the letters "ai". If I type the letters "do" no products get listed.

But I do get a searh result when searching for "do".

 

Why is it like that?

 

//Fredrik

Link to comment
Share on other sites

Does this contributions have some limitations?

I have around 2000 active products and 1000 inactive. I only get an autocomplete list when I type in the letters "ai". If I type the letters "do" no products get listed.

But I do get a search result when searching for "do".

 

Why is it like that?

 

//Fredrik

 

json needs to fetch the database info in utf8, my database is in latin1 and have special character such as å, ä and ö, This returend to display some products as "null".

So you need to encode how the data is fetched from the database if you encounter this problem.

Find

array_push($return_arr, $row['products_name']);

in autocomplete.php

and replace with

array_push($return_arr, utf8_encode($row['products_name']));

Link to comment
Share on other sites

  • 2 months later...

Hi,

Does anybody have hint on how to put search box in header,then make the search box autocomplete? just something like in the

following link,but with autocomplete suggest feature:

http://www.oscommerce.com/forums/topic/384003-search-box-in-header-23/

 

Thanks!

 

Joe

 

Hi. I am also trying to make an autocomplete search box in the header. Does anyone know how to get this to work in the header? Cheers.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...