Jump to content
Sign in to follow this  
acidvertigo

Jquery UI Autocomplete search box

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.

 

I have it working on 2.3.1

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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

 

Glad to know that it works.

 

I want to optimize the query in automplete.php to show also categories name in the results

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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); 


?>

Share this post


Link to post
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

Share this post


Link to post
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?

Share this post


Link to post
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); 


?>

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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 searh result when searching for "do".

 

Why is it like that?

 

//Fredrik

Share this post


Link to post
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']));

Share this post


Link to post
Share on other sites

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://forums.oscommerce.com/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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×