你的位置:首页 > Java教程

[Java教程]jQuery Autocomplete 备忘录


之前使用过此 widget,如今再次需要,发现很多东西已经记不起来了,当然之前用的版本也不一样。

使用之前当然是先认真阅读官方的说明文档和示例,这点很重要,而不是东一块西一点的去网上瞎找资料。Options,Methods,Events 区分的很详细,参考 jQuery Autocomplete Widget API DOC 。

我需要的场景是,一个文本框,根据动态输入,ajax get data source,select 结果后做些 dom 操作。这是一个简单场景,当然我需要的其实很复杂,后面讲。先说我遇到的问题。

先看使用代码:

function registerAuto() {  var autoId = "cust-code";  $("#" + autoId)    .autocomplete({      source: function(request, response) {        var term = $.trim(request.term);        //term.replace("$", "") only replace the first match one        if (term.length === 0 || $.trim(term.split("$").join("")).length === 0) {          return;        }        $.ajax({          url: "/order/aeo/customer",          method: "post",          dataType: "json",          data: { keywords: term },          success: function(data) {            response(data);          }        });      },      delay: 800,      autoFocus: true,      minLength: 2,      position: { my: "left bottom", at: "left top" },      select: function(event, ui) {        //console.log(ui);        showCustomer(ui.item.value);      },      change: function(event, ui) {        //console.log(ui);        if (!ui.item) {          $("#" + autoId).val("");          hideCustomer();        }      }    });}

  

问题一:

一个修改需求,需要修改已选中的文本框的值。

有一个初始值,当页面加载后,赋值文本框,自动执行搜索,然后选取记录(single item 只有一条结果记录)。为什么这样做,是因为需要触发 select 事件。

该怎么办呢?

 

解决方案:

1、最简单的办法就是:赋值文本框,然后手动调用 select 里面需要执行的方法,不需要执行 autocomplete。

 $(function() {   registerAuto();   $("#cust-code").val("@Model.CustomerCode");   showCustomer("@Model.CustomerCode"); });

如上代码就行了,但是本人很倔,就是要 autocomplete 方式,手动的去调用它的方法去触发事件。

 

2、开始以为,只要 focus 文本框,然后赋值文本就会触发自动搜索事件,结果是根本不行的。

辛苦搜索了很多资料,以 jquery autocomplete manually search 关键信息才找到解决方法。

 $(function() {   registerAuto();   $("#cust-code").val("@Model.CustomerCode");   $("#cust-code").autocomplete("search"); });

代码触发 search 事件,但问题又来,怎么实现自动 select 结果呢?使用的是投机的方式,根据生成的 items ui 去 click 标签。

 $(function() {   registerAuto();   $("#cust-code").val("@Model.CustomerCode");   $("#cust-code").autocomplete("search");   setTimeout(function() {     $(".ui-menu-item").click();   }, 100); });

其中的 setTimeout,是为了有足够的时间等待 ajax 返回结果。

好了上面问题是解决了,但一个终极问题,应该也是很多人遇到的问题,却需要亟待解决。

 

问题二:

ajax 返回结果太多,如何动态分页的去获取结果,而不是一次性加载呢?

 

自己想到了一个方案:搜索结果有滚动条,当滚动条到底部时,自动加载下一页结果,直到全部加载完。其实,用户可能只加载几页,找不到结果就换关键词重新搜索了。

但遇到的难题是:怎么把动态加载的结果,append 到 autocomplete 的 data source 里面,因为其他事件(如 select )需要。

又想到的解决是:修改 autocomplete 源码,增加扩展方法;或者绑定事件到 items ui 上,如 scroll bar 加载方法,click select 方法等。

 

解决方案:

总之目前没有实现,不知道诸君有何建议?