jQuery的自动完成与回调AJAX JSON [英] jQuery autocomplete with callback ajax json

问题描述

我试图找到一种方法，使用jQuery自动完成与回调源通过来自服务器的AJAX JSON对象列表中获取数据。

I'm trying to find a way to use jQuery autocomplete with callback source getting data via an ajax json object list from the server.

任何人可以提供一些方向？

Could anybody give some directions?

我GOOGLE了它，但无法找到一个完整的解决方案。

I googled it but couldn't find a complete solution.

推荐答案

好好的在例如自动完成文档与源$ C ​​$ C。

Perfectly good example in the Autocomplete docs with source code.

的jQuery

<script>
  $(function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#city" ).autocomplete({
      source: function( request, response ) {
        $.ajax({
          url: "http://gd.geobytes.com/AutoCompleteCity",
          dataType: "jsonp",
          data: {
            q: request.term
          },
          success: function( data ) {
            response( data );
          }
        });
      },
      minLength: 3,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.label :
          "Nothing selected, input was " + this.value);
      },
      open: function() {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
      },
      close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
      }
    });
  });
</script>

HTML

<div class="ui-widget">
  <label for="city">Your city: </label>
  <input id="city">
  Powered by <a href="http://geonames.org">geonames.org</a>
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

这篇关于jQuery的自动完成与回调AJAX JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！