2011-06-23 114 views
0

我已经设置了一个jQuery自动完成,它根据文本框上的输入更改数据源。jquery自动完成数据源更改

在jquery上的数据源更改后,直到按下向上或向下箭头按钮才会触发。

我用firebug来检查数据源,我找不到任何错误。

有人可以告诉我如何发送向上或向下箭头键控制或解决这个以任何其他方式?

非常感谢!

编辑:如下我与JSON代替这一点,但它似乎提出请求的错误提示框

jQuery(function() { jQuery("input#autocomplete").autocomplete({ contentType: 'application/json; charset=utf-8', dataType: 'json', mustMatch: false, limit: 10, minChars: 2,

  select: function (event, ui) { 
       AutoCompleteSelectHandler(event, ui) 
      } 
      , 
      source: function (request, response) { 
       jQuery.ajax({ 
        url: "http://localhost/integration/webservices/PostcodeJSON.asmx/GetPostCodeListJSONfromSuburb", 
        data: {}, 
        dataType: "json", 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        dataFilter: function (data) { return data; }, 
        success: function (data) { 
         alert(data); 
        }, 
        error: function (XMLHttpRequest, textStatus, 

errorThrown) { alert(textStatus); } }); } });

}); 

有这个网站输入框。

我在这里做了什么错?我已确认Web服务正常工作。

EDIT2:我已经喜欢以下更改:

jQuery(function() { jQuery("input#autocomplete").autocomplete({

  minChars: 2, 

      select: function (event, ui) { 
       AutoCompleteSelectHandler(event, ui) 
      } 
      , 
      source: function (request, response) { 
       jQuery.ajax({ 
        url: "http://localhost/integration/webservices/PostcodeJSON.asmx/GetPostCodeListJSONfromSuburb", 
        data: '{ Suburb: "' + 

jQuery("#autocomplete").val() + '" }', dataType: "json", type: "POST", contentType: "application/json; charset=utf-8", dataFilter: function (data) { return data.d; }, success: function (data) { alert(data.d); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); } }); } });

}); 

因此警报工作正常。但jquery不显示匹配的列表。我该怎么做呢?

编辑2:

我设法解决了webservice的问题。如何设置响应以便自动完成相应地显示列表?目前,列表中的每个项目都显示了完整的项目列表。如果我输入“ab”,并且如果有3件事匹配,那么它会在3条不同的行上向我显示相同的结果3次。

我有jQuery的设置类似如下:

的jQuery(函数(){ 的jQuery( “输入#自动完成”)自动完成({

  minChars: 2, 

      select: function (event, ui) { 
       AutoCompleteSelectHandler(event, ui) 
      } 
      , 
      source: function (request, response) { 
       jQuery.ajax({ 
        url: "http://localhost/integration/webservices/PostcodeJSON.asmx/GetPostCodeListJSONfromSuburb", 
        data: '{ Suburb: "' + jQuery("#autocomplete").val() + '" }', 
        dataType: "json", 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        dataFilter: function (data) { return data; }, 
        success: function (data) { 

                response($.map(data.d, function (item) { 
                 return { 
                  value: data.d 
                 } 
                       })) 


        }, 
        error: function (XMLHttpRequest, textStatus, errorThrown) { 
         alert(textStatus); 
        } 
       }); 
      } 
     }); 

任何帮助将非常感激,非常感谢!

+0

你的描述使得几乎没有任何意义(对我来说)。例如,'在jQuery的数据源后,直到按上或下箭头按钮才会触发。什么是'jquery'上的'datasource'?是什么导致它改变的?什么是'它'没有激发?没有共享代码,帮助你关于不可能帮助某人说“我正在使用自动填充功能,但它不起作用,请帮助”。 – davin

+0

我使用xmlhttpobject上的请求从页面获取列表, 因此数据源只是一个字符串数组。 如果我更改数据源,自动完成列表不显示。但是,当我按向上箭头键或向下箭头时,列表显示出来。 也许我应该尝试使用json与自定义数据源。 – rlee923

+0

仍然不清楚,当然不可重现。如果你设置了一个http://jsfiddle.net它将使每个人的生活变得更容易,并且解决你的问题的机会 – davin

回答

0

我得到它的工作,但有一件事我不确定的是,该项目变成只是一个字符串数组而不是JSON对象我试图解析每个项目作为JSON,但似乎并没有工作。

这里是工作的jQuery json与webservice jquery组合。

的jQuery(函数(){ 的jQuery( “输入#自动完成”)。自动完成({

  minChars: 2, 

      select: function (event, ui) { 
       AutoCompleteSelectHandler(event, ui) 
      } 
      , 
      source: function (request, response) { 
       jQuery.ajax({ 
        url: "http://localhost/integration/webservices/PostcodeJSON.asmx/GetPostCodeListJSONfromSuburb", 
        data: '{ Suburb: "' + jQuery("#autocomplete").val() + '" }', 
        dataType: "json", 
        type: "POST", 
        minChars: 2, 
        contentType: "application/json; charset=utf-8", 
        dataFilter: function (data) { return data; }, 
        success: function (data) { 
         var obj = jQuery.parseJSON(data.d); 
         response($.map(obj, function (item) { 
          var item_obj = jQuery.parseJSON(item); 
          return { 
           value: item[1] 


          } 
         })) 


        }, 
        //      parse: function (data) { 
        //       var parsed = []; 
        //       data = data.d; 

        //       for (var i = 0; i < data.length; i++) { 
        //        parsed[parsed.length] = { 
        //         data: data[i], 
        //         value: data[i].value, 
        //         result: data[i].value 
        //        }; 
        //       } 

        //       return parsed; 
        //      }, 
        //      formatItem: function (item) { 
        //       return item.value; 
        //      }, 
        error: function (XMLHttpRequest, textStatus, errorThrown) { 
         alert(textStatus); 
        } 
       }); 
      } 
     }); 



    });