jQuery Autocomplete Appending Value to URL

Question

I am currently implementing an autocomplete module to my site which parses weather information from Weather Underground

$(function(request) {
    var cities = []; // setup empty array
    $.ajax({
      url : "http://autocomplete.wunderground.com/aq?",
      query : request.term,
      dataType : "json",
      success : function(parsed_json) {
        for(i = 0; i < parsed_json['RESULTS'].length; i++) {
            cities.push(parsed_json['RESULTS'][i]['name'])
        }
      }
    });
    $( "#tags" ).autocomplete({
        source: cities
    });
});

Essentially, I populate an array called cities with the city names when the person types in their search query and it would send s request to Weather Underground's auto-complete API.

Using the variable query : request.term, I try to append the key value query=[search term] to the end of the url. However, when I check the console, it seems the request.term is always empty.

My question is - why is my input parameter empty for the text box?

The text box' id is tags.

aebabis · Accepted Answer · 2015-07-02 21:34:55Z

1

You need to initialize the widget on page load, then update its Array as you type. Since ajax is asynchronous, you need to update the autocomplete array inside the success callback

$(function () {
    var $input = $('#tags');
    $input.autocomplete({
        source: [] // Initially empty
    }).on('input', function () {
        $.ajax({
            url: "http://autocomplete.wunderground.com/aq?",
            data: { "query": $input.val() },
            dataType: "json",
            success: function (parsed_json) {
                var cities = [];
                console.log(parsed_json);
                for (i = 0; i < parsed_json['RESULTS'].length; i++) {
                    cities.push(parsed_json['RESULTS'][i]['name'])
                }
                $input.autocomplete('option', 'source', cities);
            }
        });
    });
});

Here's a Fiddle: http://jsfiddle.net/d8zxhq2b/

edited Jul 2, 2015 at 21:34

answered Jul 2, 2015 at 19:55

aebabis

3,7053 gold badges27 silver badges40 bronze badges

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

7 Comments

theGreenCabbage Over a year ago

Hi @acbabis - I am getting the following error when running your script: Uncaught TypeError: Cannot read property 'search' of undefined

aebabis Over a year ago

@theGreenCabbage Found my mistake; try again. Also, if my assumption in #1 is incorrect, you need to edit your answer explaining what request is supposed to be and where it's supposed to come from.

theGreenCabbage Over a year ago

Hi acbabis. Thanks for the help. I actually didn't explain my question properly, I apologize. I don't mean to append my text box results to my URL, what I meant it is, have the text box's input be added to the url variable so I can perform an Ajax request to the Wunderground Autocomplete API depending on what I type in. My bad.

theGreenCabbage Over a year ago

Thanks - that did return some results. However, I think because it doesn't send a request each time you type in a new character, I am only getting results for the first letter typed in. How can I change that?

aebabis Over a year ago

@theGreenCabbage input event fires on each keypress. The ajax requests may be resolving out of order or may be getting rejected if you make too many. A robust solution may require you to delay requests and reject late arrivals; but that's out of scope for this question.

|

Ricardo Pontual · Accepted Answer · 2015-07-02 20:03:07Z

1

The "request" must be used with "source" object of autocomplete.

Here are an example:

$("#tags").autocomplete({
source: function (request, response) {
    $.get("http://autocomplete.wunderground.com/aq?", {
        query: request.term
    }, function (data) {
        response($.map(results, function (data) {
                    return {
                        label: data.name,
                        value: data.value
                    }
                }));
}});

Hope it helps.

answered Jul 2, 2015 at 20:03

Ricardo Pontual

3,7573 gold badges30 silver badges46 bronze badges

Collectives™ on Stack Overflow

jQuery Autocomplete Appending Value to URL

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related