Predictive Search Text Module

Predictive Search Text Module – Instructions V2.0
Use the checkboxes next to each # to help you remember what step in the process you are currently on.


1. Place the jquery-autocomplete folder into the /includes/jquery folder.


2. Place the search_autocomplete.asp file into the /pc folder


3. Insert the following code at the end of the file /pc/inc_jquery.asp:

<!-- include files, startup script, and style overrides for search autocomplete -->
<script type='text/javascript' src='../includes/jquery/jquery-autocomplete/lib/jquery.ajaxQueue.js'></script>
<script type='text/javascript' src='../includes/jquery/jquery-autocomplete/lib/thickbox-compressed.js'></script>
<script type='text/javascript' src='../includes/jquery/jquery-autocomplete/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="../includes/jquery/jquery-autocomplete/jquery.autocomplete.css" />
<script type="text/javascript">
$().ready(function() {
$('input[name="keyword"]').autocomplete("search_autocomplete.asp",
{
width: 200,
max: 100,
matchContains: true,
selectFirst: false
}

);
});
</script>
<style type="text/css">
.ac_odd {
background-color: #eee;
}
.ac_over
{
background-color: #000;
color: #fff;
}
</style>
<!-- end search autocomplete -->


4. That’s it! Enjoy your new storefront functionality.


5. Only follow these instructions for stores with pages outside the ProductCart system:

For pages (ex: homepage in root of site) one level above the main productcart folder, include the following between the <head></head> tags on the page, replace PRODUCT_CART_FOLDER with the name of the folder on your site (i.e. “productcart”)

<!-- include files, startup script, and style overrides for search autocomplete -->
<script type='text/javascript' src='PRODUCT_CART_FOLDER/includes/jquery/jquery-autocomplete/lib/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='PRODUCT_CART_FOLDER/includes/jquery/jquery-autocomplete/lib/jquery.ajaxQueue.js'></script>
<script type='text/javascript' src='PRODUCT_CART_FOLDER/includes/jquery/jquery-autocomplete/lib/thickbox-compressed.js'></script>
<script type='text/javascript' src='PRODUCT_CART_FOLDER/includes/jquery/jquery-autocomplete/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="PRODUCT_CART_FOLDER/includes/jquery/jquery-autocomplete/jquery.autocomplete.css" />
<script type="text/javascript">
$().ready(function() {
$('input[name="keyword"]').autocomplete("PRODUCT_CART_FOLDER/pc/search_autocomplete.asp",
{
width: 200,
max: 100,
matchContains: true
}

);
});
</script>
<style type="text/css">
.ac_odd {
background-color: #eee;
}

.ac_over {
background-color: #0A246A;
color: white;
}
</style>
<!-- end search autocomplete -->


6. Optional customizations
These areas can be found within the /pc/inc_jquery.asp file or if you followed step #6 they would be found in the <head></head> of the page you added the code to:
– Change width of results area: Modify width: 200, to whatever size you would like.
– Change the max number of results returned: Modify max: 100, to whatever number of results you would like.
– By default this module searches the entire Product Name and Product SKU. If you would like to only search from the start (left to right) of a Product Name or Product SKU: Modify matchContains: true to false
– By default this module does not select the first result in the list. To make the module select the first item in the list: Modify selectFirst: false to true


7. Need help? Just email us at info@g2designgroup.com