在许多网站中，我们经常需要输入用户的地址信息。而有时为了避免输错，我们需要在输入框中提供自动补全的功能。本文将介绍如何使用 JQuery 实现一个 "城市，州" 的自动补全功能。
准备工作
首先，我们需要准备好一个含有所有城市和州的数据源。这里我们可以使用 jQuery UI Autocomplete 插件提供的数据源，也可以使用现成的 JSON 文件。
假设我们已经准备好了一个名为 cities.json 的 JSON 文件，其格式如下：
-- -------------------- ---- -------
-
-
------- ---- ------
-------- ----
--
-
------- ---- ---------
-------- ----
--
-- ---
-接下来，我们需要在 HTML 中引用 JQuery 和 jQuery UI 库文件，并创建一个输入框用于输入城市和州的信息：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------- --- ----- -------------------- ----- ---------------- ------------------------------------------------------------- ------- ----------------------------------------------------- ------- ------------------------------------------------------------ ------- ------ ------ ---------------------------- ---- --- -------------- ------ ----------- ---------------------- ------- -------
实现自动补全
接下来，我们就可以开始实现自动补全的功能了。首先，我们需要通过 AJAX 加载 cities.json 文件：
$(function() {
$.getJSON("cities.json", function(data) {
// ...
});
});然后，我们需要定义一个函数用于过滤数据源中的城市和州信息：
function filterCities(request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(cities, function(value) {
return matcher.test(value.city + ", " + value.state);
}));
}在这个函数中，request.term 表示用户当前输入的值，$.ui.autocomplete.escapeRegex() 函数用于将这个值转换为正则表达式，并将其与数据源中的城市和州信息进行比较。如果匹配成功，就将这个城市和州的信息添加到结果集中返回。
最后，我们只需要调用 jQuery UI Autocomplete 插件即可实现自动补全的功能：
-- -------------------- ---- -------
------------ -
------------------------ -------------- -
--- ------ - -----
-------------------------------------
------- ----------------- --------- -
--------------------- ----------
--
---------- -
---
---
---在这个代码片段中，source 属性指定了数据源，minLength 属性表示当用户输入的字符数少于 2 时不进行自动补全。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- --- ----- --------------------
----- ---------------- -------------------------------------------------------------
------- -----------------------------------------------------
------- ------------------------------------------------------------
--------
------------ -
------------------------ -------------- -
--- ------ - -----
-------------------------------------
------- ----------------- --------- -
--------------------- ----------
--
---------- -
---
---
-------- --------------------- --------- -
--- ------- - --- --------------------------------------------------- -----
----------------------- --------------- -
------ ----------------------- - -- - -
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------