jquery autocomplete - 单击列表项时将数据保存到DB(选择事件)

时间:2014-04-23 14:02:27

标签: javascript jquery ajax database jquery-autocomplete

我已经阅读了很多关于jq自动完成的内容,但看起来,在select事件被触发时无法发出ajax请求。 只有在单击元素时,我才会将搜索查询写入DB-Table。

Firebug以红色GET http://server.ccc/api/my/logSearchQuery?a=searchquery&b=11&v=0

显示网址
$(document).ready(function(e){
    var results = [];
    var _request = null;
    $("#input").autocomplete({
        source: function( request, response ) {
            _request = request;
            $.ajax({
                  url: "http://dataserver",
                  dataType: "jsonp",
                  jsonp: 'json.wrf',
                  data: {
                q: GenerateSearchQuery(request.term)
                  },
                  success: function( data ) {

                    results = $.map(data.response.docs, function(item) {
                    return {
                          label: item.Name,
                          value: {
                              id:cid
                          }
                        };
                    });
                response(results);
                  }
            });
        },
        minLength: 3,
        select: function( event, ui ) {
            event.preventDefault();
            // ---------------- here is what i've tried, but it fails----------------------
            $.ajax({
                  url: "api/my/logSearchQuery",
                  type: "get",
                  dataType: "json",
                  contentType: "application/json; charset=utf-8",
                  data: {"a": encodeURIComponent(_request.term), "b": results.length, "v": 0},
                  success: function(data){
                      console.log(data);
                  },
                  error: function(XMLHttpRequest, textStatus, errorThrown) {
                      console.log(XMLHttpRequest+ " : "+ errorThrown + " : " + textStatus);
                    }
            });

            if (ui.item.value != "searchAll") {
                self.location = "/list/"+ui.item.value.id;
            } else {
                $('#searchForm').submit();
            }
        }
    });});

Ajax调用适用于源事件,但那不是我想的正确的地方。 ajax错误是空的。

请帮忙。

1 个答案:

答案 0 :(得分:0)

是的,我是初学者;-)

问题是,ajax调用下的代码......

select: function( event, ui ) {
        event.preventDefault();
        // ---------------- here is what i've tried, but it fails----------------------
        $.ajax({
            url: "api/my/logSearchQuery",
            type: "get",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
           data: {"a": encodeURIComponent(_request.term), "b": results.length, "v": 0},
              success: function(data){
                  console.log(data);
              },
              error: function(XMLHttpRequest, textStatus, errorThrown) {
                  console.log(XMLHttpRequest+ " : "+ errorThrown + " : " + textStatus);
                }
        });
  //----------this part--------------- 
        if (ui.item.value != "searchAll") {
            self.location = "/list/"+ui.item.value.id;
        } else {
            $('#searchForm').submit();
        }
    } 
在ajax调用正在工作(异步)期间,

被触发。

所以我把这一部分推到了complete:的{​​{1}}事件中

$.ajax

现在它运作正常。