基于bootstrap插件实现autocomplete自动完成表单

基于Bootstrap插件的Aulete自动完成表单

对于想要实现基于Bootstrap插件的Aulete自动完成表单的朋友们，这篇文章将为你提供详细的指导和帮助。我们将介绍如何使用bootstrap插件来实现aulete自动完成表单，并提供脚本代码、用例以及后台服务端（php）的相关内容。

确保你已经加载了bootstrap和jquery。接下来，我们来了解一下后端返回的数据格式。后端返回的二维数组需要与formatItem方法调用的数据格式保持一致。需要注意的是，返回的数据需要先进行parseJSON处理。

现在，让我们详细了解一些相关参数：

source：这是一个function，接受query和process作为参数。query表示当前文本输入框中的字符串，你可以在该方法中通过ajax向后台请求数据（数组形式的json对象），然后将返回的对象作为process的参数。

formatItem：这是一个function，用于将返回数据中的某个json对象转化为字符串格式，以显示在提示列表中。

setValue：这是一个function，当选中提示列表的某项时，用于设置文本输入框中显示的值以及实际需要获取的值。返回值格式包括'data-value'和'real-value'。

items：表示自动完成提示的最大结果集数量，默认值为8。

minLength：当前文本输入框中的字符串达到该属性值时才进行匹配处理，默认值为1。

delay：指定延时毫秒数后，才向后台请求数据，以防止输入过快导致频繁向后台请求，默认值为500。

接下来，我们来看一下基于bootstrap插件实现aulete自动完成表单的示例代码：

```html

```

你还需要注意后端返回的标准json格式。例如：

```json

[{"iid":"12345678901234567890","mobile":"1850000"},{"iid":"12345785","mobile":"1850001"}]

```

```javascript

$('auleteInput').aulete({

source: function(query, process) {

var matchCount = this.options.items; // 设置返回结果集的最大数量

$.ajax({

url: "/bootstrap/region",

type: 'POST',

data: {

matchInfo: query,

matchCount: matchCount

},

success: function(respData) {

process(respData); // 处理返回的数据

}

});

},

formatItem: function(item) {

return item["regionName"] + "（" + item["regionNameEn"] + "，" + item["regionShortnameEn"] + "） - " + item["regionCode"];

},

setValue: function(item) {

return {'data-value': item["regionName"], 'real-value': item["regionCode"]};

}

});

$("goBtn").on('click', function() { // 绑定点击事件以获取文本框的实际值

var regionCode = $("auleteInput").attr("real-value") || "";

alert("找到的区域代码是：" + regionCode); // 提示框显示区域代码

});

```

想要更深入地了解上述代码？那就点击进去吧！除此之外，还有三个精彩的专题等着大家。 这些专题涵盖了从基础到高级的各个方面，无论你是初学者还是资深开发者，都能在这里找到适合自己的内容。 让我们一起走进编程的世界，未知的领域，不断提升自己的技能。 以上就是本文的全部内容，希望这些知识和专题能对大家的学习旅程有所帮助，激发你的无限潜能。