Question

Hey i am using Ajax Autocomplete for Jquery by Tomas (http://www.devbridge.com/projects/autocomplete/jquery/) in my GAE application. I have a City search module where a person keys in a city and the list of city names to choose from appear in a dropdown list. I am returning a json response as required by the Autocomplete Library. I am able to display the list of cities in the drop down however i want the user to be redirected to a specific url as he selects an option from the list. i am also returning a data object which is an optional parameter in the json results. So now there are three things that i am returning.

1. 'query': 'Ade'
2. 'suggestions': ['Adelaide', 'Adelaide Hills', 'Adelia Maria']
3. 'data': [{'Adelaide': '/Oceania/Australia/Adelaide'},{'Adelaide Hills':'/Oceania/Australia/Adelaide Hills'},{'Adelia Maria':'/Oceania/Australia/Adelia Maria'}]

Here is the code where i am sending the json results:

class SearchCity(TemplateHandler):
  def get(self):
    results, data, url = [], [], ''
    word = self.request.get('query')
    search = models.City.all().filter('name >=', word.capitalize()).filter('name <', word.capitalize()     + u'\ufffd')
    for res in search:
      url = '/' + res.country.continent.name + '/' + res.country.url_name + '/' + res.name + '/'
      results.append(res.name)
      data.append({res.name:url})
    json_results = {
     'query' : word, 
     'suggestions' : results,
     'data': data
    }
  self.response.out.write(json.dumps(json_results))

Here’s the Javascript where i am trying to trigger the Autocomplete function:

<script type="text/javascript">
  //<![CDATA[
   var a = $('#search-city').autocomplete({
     serviceUrl:'/search_city',
     delimiter: /(,|;)\s*/, // regex or character
     maxHeight:140,
     width:170,
     zIndex: 9999,
     deferRequestBy: 0, //miliseconds
     noCache: false, //default is false, set to true to disable caching
   });
  //]]>
</script>

Now according to the Author of the plugin we can use something like this for a call back function:

// callback function:
onSelect: function(value, data){ alert('You selected: ' + value + ', ' + data); },

Questions:

1.) how do i access the the value of url in the dictionary that has the key which user has selected and redirect the user to that url ?

2.) if i just pass the list of urls in the ‘data’ object would i be able to link the right Name to the right url ?

3.) Also, is there a way that i can Show ‘No Matches Found’ if there are no results in the suggestions list ?

Answer 1

Sorry it was as easy as changing:

data.append({res.name:url})

to

data.append(url)

and adding the following to the JS configuration :

onSelect: function(value, data){ window.location.replace(data); },