i am working on search form with autocomplete function. my autocomplete is working fine. i want to send the data to another php page after autocomplete value is set. below is my jquery for autocompleate.
function autocomplet() {
var min_length = 1; // min caracters to display the autocomplete
var keyword = $('#searchitem').val();
var search_location = $('#search_location').val();
var datastring= 'keyword='+ keyword + '&search_location='+search_location;
if (keyword.length >= min_length) {
$.ajax({
url: 'global_search.php',
type: 'POST',
data: datastring,
success:function(data){
$('#search_list_id').show();
$('#search_list_id').html(data);
}
});
} else {
$('#search_list_id').hide();
}
}
// set_item : this function will be executed when we select an item
function set_item(item) {
// change input value
$('#searchitem').val(item);
window.location.href = 'searchtestr.php?key=' + data
// hide proposition list
$('#search_list_id').hide();
}
i tried window.location.href = 'searchtestr.php?key=' + data
to redirect the page but its not working. the condition is the page should be redirect after some thing is selected from autocomplete.
You need to call your set_item
method in your success
handler:
success:function(data){
$('#search_list_id').show();
$('#search_list_id').html(data);
set_item(data.item); //data.something
}
Also, you are trying to pass a variable called data
to the next page but the set_item
method doesn't have access to that variable. You'd have to send item
e.g. window.location.href = 'searchtestr.php?key=' + item;
Also, I'm not sure if you are doing something with a SPA (guessing not)... I don't think it makes sense to modify the DOM after you redirect the page - e.g. $('#search_list_id').hide();
and $('#searchitem').val(item);
. You are aware thatwindow.location.href
is not triggering an AJAX call and will redirect the entire page?
try this
function autocomplet() {
var min_length = 1; // min caracters to display the autocomplete
var keyword = $('#searchitem').val();
var search_location = $('#search_location').val();
var datastring= 'keyword='+ keyword + '&search_location='+search_location;
if (keyword.length >= min_length) {
$.ajax({
url: 'global_search.php',
type: 'POST',
data: datastring,
success:function(data){
$('#search_list_id').show();
$('#search_list_id').html(data);
},
change: function (event, ui) {
if (ui.item == null || ui.item == undefined) {
} else {
window.location.href = 'searchtestr.php?key=' + data;
}
});
} else {
$('#search_list_id').hide();
}
}
</div>
i tried like below and it worked. my concern is after value is set then redirect to php page.
function autocomplet() {
var min_length = 1; // min caracters to display the autocomplete
var keyword = $('#searchitem').val();
var search_location = $('#search_location').val();
var datastring= 'keyword='+ keyword + '&search_location='+search_location;
if (keyword.length >= min_length) {
$.ajax({
url: 'global_search.php',
type: 'POST',
data: datastring,
success:function(data){
$('#search_list_id').show();
$('#search_list_id').html(data);
}
});
} else {
$('#search_list_id').hide();
}
}
// set_item : this function will be executed when we select an item
function set_item(item) {
// change input value
$('#searchitem').val(item);
// hide proposition list
$('#search_list_id').hide();
var location = $('#search_location').val();
var search_term = $('#searchitem').val();
if(search_term != ''){
window.location.href = 'searchtestr.php?location=' + location + '&search_term='+ search_term;
}
}
Thank You all for helping me.