I can use some advise on ajaxlivesearch.com function in jquery - php

Question

I have a searchbar included with the livesearch.com functionality from ajaxlivesearch.com
The problem is when i click on a result nothing happens. I want to send a query and show a result page when i click on the result. Before i included the ajaxlivesearch funtion i just typed in a keyword and pushed enter and then my result page showed up, this happens with an query. But after i included the ajaxlivesearch funtion pressing enter was not an option anymore, nothing happens.
I think the problem is within these jQuery lines;
jQuery(".mySearch").ajaxlivesearch({
loaded_at: <?php echo $time; ?>,
token: <?php echo "'" . $token . "'"; ?>,
maxInput: <?php echo $maxInputLength; ?>,
onResultClick: function(e, data) {
// get the index 1 (second column) value
var selectedOne = jQuery(data.selected).find('td').eq('1').text();
// set the input value
jQuery('.mySearch').val(selectedOne);
// hide the result
jQuery(".mySearch").trigger('ajaxlivesearch:hide_result');
},
onResultEnter: function(e, data) {
// do whatever you want
// jQuery(".mySearch").trigger('ajaxlivesearch:search', {query: 'test'});
},
onAjaxComplete: function(e, data) {
// do whatever you want
}
});
I hope someone can help me out
Cheers!

Answer 1

Before you do anything, go to the ajaxlivesearch.js file, and find this line of code ->
// disable the form submit on pressing enter
form.submit(function () {
return false;
});
Basically it's disabling anything form happening when you press enter, which is kind of the opposite of what you're trying to do. So obviously you need to change it, ex.
$("#search_ls_query").submit(function(){
return true;
});
Now, (This is not an entirely vital addition but nonetheless, submit the form in the "onResultEnter" area that you add to your index page. Ex.
jQuery(document).ready(function(){
jQuery(".mySearch").ajaxlivesearch({
loaded_at: <?php echo $time; ?>,
token: <?php echo "'" . $token . "'"; ?>,
maxInput: <?php echo $maxInputLength; ?>,
onResultClick: function(e, data) {
// get the index 0 (1st column) value
var selectedOne = jQuery(data.selected).find('td').eq('0').text();
// set the input value
jQuery('.mySearch').val(selectedOne);
// hide the result
jQuery(".mySearch").trigger('ajaxlivesearch:hide_result');
},
onResultEnter: function(e, data) {
$("#search_ls_query").submit();
},
/* #search_ls_query is the id of the default form that is submitted when you press enter (Find in ajaxlivesearch.js)*/
onAjaxComplete: function(e, data) {
}
});
})
Now go to the ajaxlivesearch.js file and find this:
var wrapper = '<div class="' + ls.container_class + '">' +
'<form accept-charset="UTF-8" class="' + ls.form_class + '" id="' + ls.form_class + '_' + elem_id + '" name="ls_form">' +
'</form>' +
'</div>';
And add an action to this form as this is what is being activated when you press enter in the search bar. So make it this:
var wrapper = '<div class="' + ls.container_class + '">' +
'<form accept-charset="UTF-8" action="search.php" class="' + ls.form_class + '" id="' + ls.form_class + '_' + elem_id + '" name="ls_form">' +
'</form>' +
'</div>';
This way it actually has a destination to send the values to. So the name of the value being sent is "ls_query", so whatever you type in the bar will now be inserted into the value of "ls_query". Therefore, once you press enter and arrive at your new page, you can then use this variable to filter your search options, or whatever you need. For example, on your search page you could write:
$ls_query = secure($_GET['ls_query'],$mysqli);
$sql = "SELECT *
FROM users
WHERE username ='$ls_query'";
This took me a while to figure out as well. But if you're still looking for the answer, this worked for me. Let me know how it went!