Question

我想让我的输入字段具有jquery自动完成功能，我从数据库中获取公司名称并将其显示给用户。下面是我在jquery.com上找到的一个片段。我想重写它以满足我的需求，我需要一些帮助。

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

  $( "#company_name" ).autocomplete({
   source: function( request, response ) {
    $.ajax({
     url: "inc/company_name.php",
     dataType: "jsonp",
     data: {
      featureClass: "P",
      style: "full",
      maxRows: 12,
      name_startsWith: request.term
     },
     success: function( data ) {
      response( $.map( data.geonames, function( item ) {
       return {
        label: item.name,
        value: item.name
       }
      }));
     }
    });
   },
   minLength: 2,
   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" );
   }
  });
});

在source属性中，一旦成功，我想替换

response( $.map( data.geonames,
    function( item ) { ... }

使用正确的代码显示我的json对象数据。下面是我在PHP中创建的json对象。

<?php
 $arr = array  ( 'item' => 'company name' );
 echo json_encode($arr);
?>

Answer 1

尝试使用自动填充插件：

http://docs.jquery.com/Plugins/autocomplete

示例：

var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
    $("#example").autocomplete(data);

您可以使用ARTE中的ajaxloader来修改它以适合您：

http://plugins.jquery.com/node/12682

您将使用此代码：

/* init the arte engine */
$.arte({'ajax_url':'remote_xml_file_url'}).add_action("xml_node", fct);

/* the function which will be called every tick with the new node */
function fct(data){
  window.data = data;
}

jquery自动完成与远程json对象

1 个答案: