如果ajax函数源

时间:2017-02-02 12:55:57

标签: jquery-ui

我已经使用jQuery UI创建了一个自动完成搜索字段。我可以毫无问题地使用代码,它可以生成并以HTML格式显示结果而不会出现问题。

然而,由于我在网站上使用了更多AJAX功能,并且不想将PHP文件分开以便对MySQL进行查询,因此我希望使用自动完成功能发送2个数据。 1是搜索词本身,另一个是我在php中的函数的名称,因此它可以识别并找到正确的查询并返回数据。

使用这两个版本的代码,我可以在chrome的网络中看到POST成功,我从PHP获得了json编码的结果数组。

但是在版本2中,它没有使用_renderItem为它生成HTML。

提前致谢!

$( "#newInit" ).autocomplete({
  source: function(request, response) {
        $.ajax({
            url: "search.php",
            type: "POST",
            dataType: "json",
            data: {
                term : request.term,
                f : "item_search"
            }
        });
  },
  minLength: 2,
  focus: function( event, ui ) {
    $( "#newInit" ).val( ui.item.name );
    return false;
  },
  select: function( event, ui ) {
    $( "#newInit" ).val( ui.item.name );
    $( "#newInit-id" ).val( ui.item.item_id );
    $( "#newInit-weight" ).html( ui.item.weight );
    $( "#newInit-icon" ).attr( "src", "images/" + ui.item.icon );

    return false;
  }
})
 .autocomplete( "instance" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .append( "<div>Name: " + item.name + "<br>Weight: " + item.weight + "<img width='30' height=30' src='http://url.com/" + item.icon + "'/></div>" )
    .appendTo( ul );
};

1 个答案:

答案 0 :(得分:1)

在你的ajax功能中添加它,它会将ajax响应传递给自动完成源。

      success: function( data ) {
        if(data) response( data );
        else response({});
      }