Sample script for building an AJAX Cities Listbox

[Adrian]

The following code will add a dynamic - AJAX driven Auto Complete Listbox to any page. (Although this particular instance uses JQuery as the JavaScript frame work, the point here is to demonstrate the free server side JSONP service, rather than the elegance of the client side scripting.) There is more information, along with a working demo of the code here: http://www.geobytes.com/free-ajax-cities-jsonp-api.htm

Code: Select all

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/themes/flick/jquery-ui.css" rel="stylesheet" type="text/css" /><style type="text/css">
.ui-menu .ui-menu-item a,.ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active {
   font-weight: normal;
   margin: -1px;
   text-align:left;
   font-size:14px;
   }
.ui-autocomplete-loading { background: white url("/images/ui-anim_basic_16x16.gif") right center no-repeat; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">

jQuery(function ()
    {
       jQuery("#f_elem_city").autocomplete({
           source: function (request, response) {
               jQuery.getJSON(
                   "http://gd.geobytes.com/AutoCompleteCity?callback=?&q="+request.term,
                        function (data) {
                       response(data);
                   }
               );
           },
           minLength: 3,
           select: function (event, ui) {
               var selectedObj = ui.item;
               jQuery("#f_elem_city").val(selectedObj.value);
               return false;
           },
           open: function () {
               jQuery(this).removeClass("ui-corner-all").addClass("ui-corner-top");
           },
           close: function () {
               jQuery(this).removeClass("ui-corner-top").addClass("ui-corner-all");
           }
       });
       jQuery("#f_elem_city").autocomplete("option", "delay", 100);
   });
</script>

<form action="" method="post" name="form_demo" id="form_demo" enctype="multipart/form-data" onsubmit="return false;">
<input class="ff_elem" type="text" name="ff_nm_from[]" value="" id="f_elem_city"/>
</form>

If any one has a mootools version of this, then please feel free to post it, or of course any suggestions or improvements would be very welcome.

[kateland]

Hi Adrian, this is a great tool, exactly what I was looking for. I'm trying to integrate this on a submission form. I have two questions:

1. The ajax listbox is anchoring in the upper left corner of my browser (Win7 Chrome). Is there any way to anchor it to the input box, below it?
2. I also put in the code for the readonly fields, but they are not populating when I select a city. Any idea why?

Thanks!