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
– Mario Santini, Commented Oct 28, 2016 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
– user1794918, Commented Oct 28, 2016 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
– JAAulde, Commented Oct 28, 2016 at 13:59
I was thinking of using onblur as the function to set the city variable. — user1794918
– user1794918, Commented Oct 28, 2016 at 14:01

dashtinejad · Accepted Answer · 2016-10-29 03:51:44Z

1

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);
    });

});

answered Oct 29, 2016 at 3:51

dashtinejad

6,2734 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user1794918 · Accepted Answer · 2016-10-29 03:15:51Z

0

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.

answered Oct 29, 2016 at 3:15

user1794918

1,1813 gold badges17 silver badges36 bronze badges

Collectives™ on Stack Overflow

Autocomplete not using current jquery value

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related