Hello Everyone,
I was hoping a few weeks back to search on the forums here and find a contribution that someone made for a Predictive Search Query but the only one that is on here you have to pay for - don’t get me wrong it is a very nice addon as it is build as a proper addon you install under admin > addons and you can manage what it does but i thought i would build this myself by adding a custom PHP file and making a some modifications to the search template file.
If anyone is interested in using this modification please feel free to use it - it does not modify any core files only a template file!
I made this modification based on the current CS-Cart version i have installed which is: 2.0.15 - i however don’t see why this would not work on any builds within version 2.0
create a file called rpc.php and place into root level of cs-cart
Insert the following code in the rpc.php file - you may need to change the query to reflect to your database table setup “cscart_product_descriptions” is what is normally default unless you specified differently when install your cart. If you did specify something different you will need to change the “cscart_” to reflect to what you set or have set for your database table.
<br />
<?php<br />
define('AREA', 'C');<br />
define('AREA_NAME' ,'customer');<br />
<br />
require dirname(__FILE__) . '/prepare.php';<br />
require dirname(__FILE__) . '/init.php';<br />
<br />
define('INDEX_SCRIPT', Registry::get('config.customer_index'));<br />
<br />
if(isset($_POST['queryString'])) {<br />
$queryString = $_POST['queryString']; <br />
if(strlen($queryString) >0) {<br />
$query = "SELECT product FROM cscart_product_descriptions WHERE product LIKE '%$queryString%' LIMIT 10";<br />
$result = mysql_query($query) or die("There is an error in database please contact support@fatsogames.co.uk");<br />
while($row = mysql_fetch_array($result)){<br />
?><br />
<li onclick="fill('<?php echo $row[product]; ?>');"><?php echo $row[product]; ?></li><br />
<?php } ?><br />
<li class="resultsNotice">Displaying max of 10 results....</li><br />
<?php<br />
}<br />
}<br />
?><br />
```<br />
<br />
[b]Open "/skins/YOUR_TAMPLATE/customer/common_templates/search.tpl" within your template folder[/b]<br />
<br />
[b]Above[/b]<br />
<br />
[html]<form action="{$index_script}" name="search_form" class="search_form" method="get">[/html]<br />
<br />
[b]Add[/b]<br />
<br />
```php
<br />
{literal}<br />
<br />
<script type="text/javascript" language="javascript"><br />
<br />
function lookup(inputString) {<br />
if(inputString.length == 0) {<br />
// Hide the suggestion box.<br />
$('#suggestions').hide();<br />
} else {<br />
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){<br />
if(data.length >0) {<br />
$('#suggestions').show();<br />
$('#autoSuggestionsList').html(data);<br />
}<br />
});<br />
}<br />
} // lookup<br />
<br />
function fill(thisValue) {<br />
$('#inputString').val(thisValue);<br />
$('#suggestions').hide();<br />
}<br />
</script><br />
<br />
{/literal}<br />
```<br />
<br />
[b]Find (around line 26)[/b]<br />
<br />
[html]<input type="text" name="q" value="{$search.q}" onfocus="this.select();" class="search-input" />[/html]<br />
<br />
[b]Replace with[/b]<br />
<br />
[html]<input type="text" name="q" value="{$search.q}" onkeyup="lookup(this.value);" class="search-input" id="inputString" autocomplete="off" />[/html]<br />
<br />
I myself made the search category list hidden as i did not need it, if you do have this dropdown still showing this modification will not search within a selected category that is selected by a user - as it stands it searches all products!<br />
<br />
[b]Below that add[/b]<br />
<br />
[html]<br />
<div class="suggestionsBox" id="suggestions" style="display: none;"><br />
<ul class="suggestionList" id="autoSuggestionsList"></ul><br />
</div><br />
[/html]<br />
<br />
[b]Open "/skins/YOUR_TAMPLATE/customer/styles.css" within your template folder and add[/b]<br />
<br />
```php
<br />
.suggestionsBox { position: relative; left: 166px; top: -21px; margin: 10px 0px 0px 0px; width: 208px; background-color: #422F22; color: #ffffff; z-index: 999999; }<br />
.suggestionsBox .suggestionList { margin: 0px; padding: 0px; list-style: none; }<br />
.suggestionsBox .suggestionList li { margin: 0px 0px 3px 0px; padding: 6px; cursor: pointer; text-align: left; color: #ffffff; }<br />
.suggestionsBox .suggestionList li:hover { background: #271e14; }<br />
.suggestionsBox .suggestionList li.resultsNotice { background: #271e14; cursor: default; }<br />
```<br />
<br />
This was styled to my liking to match my needs so most likely you will want to make changes to your needs!<br />
<br />
The addon similar to my modification above also shows a thumbnail of the product but i did not require this feature but can be easily added to this modification if needed. If anyone requires this feature to be added to this modification let me know on this post and i will make some changes for you and post back.<br />
<br />
I hope this modification is useful to people whom require something like this, please free to send any donations / any amount for my time in doing this and sharing to our paypal account: [email]billing@1line.co.uk[/email] :)<br />
<br />
Feedback or feature requests would be great from anyone also!