2010-11-15 3 views
0

Я хочу, чтобы у моего поля ввода был автозаполненный jquery, где я получаю названия компаний из базы данных и отображаю их пользователю. Ниже приведен фрагмент, который я нашел на jquery.com. Я хочу переписать его в соответствии с моими потребностями, и мне нужна помощь.jQuery автозаполнение с удаленным объектом json

$(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"); 
    } 
    }); 
}); 

в атрибуте источника, на Sucess, я хочу, чтобы заменить

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

с соответствующим кодом, чтобы отобразить мои данные объекта JSON. Ниже представлен мой json-объект, созданный в PHP.

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

ответ

1

Попробуйте их автозаполнения плагин:

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

примера:

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

Вы можете изменить его в соответствии с вашими, используя ajaxloader из чего-то вроде ARTE:

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; 
} 
Смежные вопросы