打开在我的自定义模块下面的 Autocomplete .. 我需要修改几个地方... 我们可以先去了解一下 jQuery UI 的 Autocomplete 给我们提供的 API ，还有一些选项 ..

比如在用户在文本框里输入内容，搜索的时候，会触发一个 search 事件 .. 在这个 options 里面，是给 jQuery UI 的 Autocomplete 提供的一些选项 .. 这里说明了一下处理 search 用的是 searchHandler ..

找到这个方法 ... 在这里，我们可以去给文本框的包装元素添加一个 css 类 .. 就是 loading ... 这样就会显示一个动态加载的小图标 ..

Add custom class to parent element ..

在事件对象的 target ... parentNode .. 用一下 classList 的 add 这个方法 .. 添加一个 loading 这个 css 类 ..

// Add custom class to parent element.
event.target.parentNode.classList.add('loading');

在收到响应以后，我们要去掉添加在父元素上的这个 loading 类 ..

jQuery UI 的 autocomplete 收到要响应会触发 response ... 先去定义一个方法 .. 添加点注释说明一下这个方法 ..

The response handler is called after a search completes.

方法的名字可以是 responseHandler ... 有一个事件参数 ... 在这个方法里，我们可以用一下 event.target.parentNode.classList.remove 这个方法，去掉 loading 这个类 ..

然后找到这个 options 对象 .. 在里面说明一下处理 response 的是刚才我定义的 responseHandler 这个方法 ..

再到浏览器上去预览一下 ...

正常的状态会显示一个搜索小图标 ...

再文本框里输入点内容 ... 这样会用一个动态的小图标替换掉那个搜索小图标 ..

收到响应以后，这个小图标又会恢复成它的原始状态 ...