Autocomplete not using current jquery value

Question

I am modifying a jQuery autocomplete so that it passes a second term to the search feature to narrow the search. The problem I am having is being able to concatenate the city on to the URL

$(function() {

    var city = $('#city').val();    //get the city value from text field
    var source = 'search.php?city=';  //URL where the search takes place
    //autocomplete
    $(".auto").autocomplete({
    source: source+city ,        //concatenation not working.
    minLength: 1
  });               

});

I have tried different ways to concatenate the city name onto the url

$(function() {

    //var city = //$('#city').val();
    var source = 'search.php?city=';
    //autocomplete
    $(".auto").autocomplete({
    source: source+$('#city').val(),
    minLength: 1
  });               

});

I know that the

var city = 'Austin'

works. I am unsure of the

$('#city').val()

Because if I can hard code it in then the same should work for the function to get the variable from the text field. Right?

The text fields are like this

<form action='' method='post'>
    <p><label>Pharmacy Names : </label><input type='text' name='names' value='' class='auto'></p>
    <p><label>City : </label><input type='text' name='city' id='city' value='' placeholder='Enter City First'></p>
</form>

Even this post Add form value to end of url - Jquery agrees with what I am thinking

This post Get the value in an input text box shows that I am using the correct jquery call to get the textbox value. It just seems like it should be working but it is not.

I think the problem in your code is that you set the url when you don't have the city yet. Then *autocomplete* didn't check it again on further ajax requests. — Mario Santini, Oct 28 '16 at 13:57
I figured it out from the first alert. It comes up empty because the function runs on load the text field is empty. So it remains empty during the execution of the auto search. So, the value of the city needs to be set after the text is entered. — user1794918, Oct 28 '16 at 13:57
You're only checking the value of `city` and passing it to `autocomplete` at DOM Ready. At that time, the value is empty. You need to use a function as your `source` option, and that function needs to grab and use the value of `city` and uses it to fetch the data. — JAAulde, Oct 28 '16 at 13:59
I was thinking of using onblur as the function to set the city variable. — user1794918, Oct 28 '16 at 14:01
http://stackoverflow.com/questions/21385892/how-to-use-source-function-and-ajax-in-jquery-ui-autocomplete — freedomn-m, Oct 28 '16 at 14:08
I've updated the question title to match problem - edit it as appropriate — freedomn-m, Oct 28 '16 at 14:09
Check the documentation, for the `source` parameter : http://api.jqueryui.com/autocomplete/#option-source . Use a function to format your URL on the fly, then do you ajax request, then push the results in the callback. — NeoPix, Oct 28 '16 at 14:23

score 1 · Answer 1 · answered Oct 29 '16 at 03:51

The behavior of your script is truly correct. This is happened, because when your script initialized, the city input is empty.

You should attach an event handler to your city input, and whenever the user type something on that, change the source of your autocomplete:

$(function() {

    // initialize the autocomplete
    var source = 'search.php?city=';

    $(".auto").autocomplete({
        source: source,
        minLength: 1
    });               

    // event handler for yout input
    $('#city').on('input', function (e) {
        var city = this.value;

        // set the new source to your autocomplete
        // based on jQuery UI Autocomplete
        // http://api.jqueryui.com/autocomplete/#method-option
        $('.auto').autocomplete( "option", "source", source+city);
    });

});

score 0 · Answer 2 · answered Oct 29 '16 at 03:15

This is what worked for me to be able to use two textboxes to pass two variables to the sql query.

$(function() {
//Pharmacy autocomplete
$("#pharm").click(function() {
var city = $("#city").val();

var str = "../../library/ajax/pharmacy_autocomplete/search.php?city="+city;
    //autocomplete
    $(".pharmacy").autocomplete({
        source: str,
        minLength: 1
    }); 
  });
});

The #pharm text box is where the click will occur after filling in the city text box. I brought the auto complete inside this function that I did not have to pass the city value to the auto complete. Now I could just concatenate city value onto the URL and get my second value to the search.php.

Autocomplete not using current jquery value

2 Answers2