acidvertigo Posted January 26, 2011 Share Posted January 26, 2011 Hello this is the support Thread for the jquery UI autocomplete search box add-on You can find it on this link Quote Link to comment Share on other sites More sharing options...
chrish123 Posted January 26, 2011 Share Posted January 26, 2011 Has anyone got this to work on rc2a? Kind regards Chris Quote Link to comment Share on other sites More sharing options...
pdcelec Posted January 26, 2011 Share Posted January 26, 2011 Has anyone got this to work on rc2a? Kind regards Chris I have it working on 2.3.1 Quote Link to comment Share on other sites More sharing options...
chrish123 Posted January 26, 2011 Share Posted January 26, 2011 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 Quote Link to comment Share on other sites More sharing options...
acidvertigo Posted January 27, 2011 Author Share Posted January 27, 2011 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 :) Quote Link to comment Share on other sites More sharing options...
chrish123 Posted January 27, 2011 Share Posted January 27, 2011 Hey, thank you I just tried it and it works perfect!! Very good mod! Thanks ;) Quote Link to comment Share on other sites More sharing options...
acidvertigo Posted January 27, 2011 Author Share Posted January 27, 2011 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 Quote Link to comment Share on other sites More sharing options...
ptt81 Posted January 28, 2011 Share Posted January 28, 2011 (edited) 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 January 28, 2011 by ptt81 Quote Link to comment Share on other sites More sharing options...
acidvertigo Posted January 28, 2011 Author Share Posted January 28, 2011 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 Quote Link to comment Share on other sites More sharing options...
acidvertigo Posted January 28, 2011 Author Share Posted January 28, 2011 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. Quote Link to comment Share on other sites More sharing options...
♥stubbsy Posted January 28, 2011 Share Posted January 28, 2011 <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 Quote Link to comment Share on other sites More sharing options...
ptt81 Posted January 28, 2011 Share Posted January 28, 2011 (edited) 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 January 28, 2011 by ptt81 Quote Link to comment Share on other sites More sharing options...
♥stubbsy Posted January 28, 2011 Share Posted January 28, 2011 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 Quote Link to comment Share on other sites More sharing options...
♥stubbsy Posted January 28, 2011 Share Posted January 28, 2011 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); ?> Quote Link to comment Share on other sites More sharing options...
ptt81 Posted January 29, 2011 Share Posted January 29, 2011 (edited) 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 January 29, 2011 by ptt81 Quote Link to comment Share on other sites More sharing options...
♥stubbsy Posted January 29, 2011 Share Posted January 29, 2011 sorry but i dont know what i else i can d to help. I no expert, just a hacker, but whats the URL? Quote Link to comment Share on other sites More sharing options...
♥stubbsy Posted January 29, 2011 Share Posted January 29, 2011 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); ?> Quote Link to comment Share on other sites More sharing options...
ptt81 Posted January 30, 2011 Share Posted January 30, 2011 (edited) 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 January 30, 2011 by ptt81 Quote Link to comment Share on other sites More sharing options...
♥stubbsy Posted January 31, 2011 Share Posted January 31, 2011 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 Quote Link to comment Share on other sites More sharing options...
ilosc6316 Posted May 12, 2012 Share Posted May 12, 2012 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 Quote Link to comment Share on other sites More sharing options...
ilosc6316 Posted May 12, 2012 Share Posted May 12, 2012 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 Quote Link to comment Share on other sites More sharing options...
ce7 Posted May 31, 2012 Share Posted May 31, 2012 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 Quote Link to comment Share on other sites More sharing options...
redrum Posted September 1, 2012 Share Posted September 1, 2012 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 Quote Link to comment Share on other sites More sharing options...
redrum Posted September 4, 2012 Share Posted September 4, 2012 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'])); Quote Link to comment Share on other sites More sharing options...
Guest Posted November 6, 2012 Share Posted November 6, 2012 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.