如何将Bootstrap的autocomplete插件改写为长尾自动完成？

本文共计784个文字，预计阅读时间需要4分钟。

基于Bootstrap插件实现autocomplete自动完成表单，提供脚本代码、示例以及后台服务端（PHP）实现。

首先确保已加载Bootstrap和jQuery。以下是实现步骤：

1. HTML结构： 请输入内容：

2. CSS样式（可选，根据需要调整）：css#suggestions { position: absolute; border: 1px solid #ccc; border-bottom: none; border-top: none; z-index: 1000; top: 100%; left: 0; right: 0;}.suggestion-item { padding: 10px; cursor: pointer;}.suggestion-item:hover { background-color: #f5f5f5;}

3. JavaScript脚本：javascript$(document).ready(function() { var $autocomplete=$('#autocomplete'); var $suggestions=$('#suggestions');

$autocomplete.on('input', function() { var query=$(this).val(); if (query.length > 0) { // 调用PHP后端获取数据 $.ajax({ url: 'autocomplete.php', type: 'GET', data: { query: query }, dataType: 'json', success: function(data) { $suggestions.empty(); data.forEach(function(item) { $suggestions.append('' + item + ''); }); }, error: function() { $suggestions.empty(); } }); } else { $suggestions.empty(); } });

$suggestions.on('click', '.suggestion-item', function() { $autocomplete.val($(this).text()); $suggestions.empty(); });});

4. PHP后端（autocomplete.php）：php

// 获取用户输入$query=$_GET['query'];

// 过滤搜索建议$filteredSuggestions=array_filter($suggestions, function($suggestion) use ($query) { return strpos($suggestion, $query)===0;});

// 返回JSON格式的搜索建议header('Content-Type: application/json');echo json_encode($filteredSuggestions);?>

以上代码提供了一个简单的autocomplete实现，包括前端HTML、CSS和JavaScript，以及后端PHP服务端。

基于bootstrap插件实现autocomplete自动完成表单,提供脚本代码,用例,以及后台服务端(php).原文有些没说清楚的地方,希望能帮助大家.
首先肯定还是加载bootstrap&jquery了.
需要额外说明的是,后端返回的二维数组,和formatItem方法下面的调用保持一致即可;
另外,返回的数据要先parseJSON!切记.


相关参数说明：
source：function(query,process){}。query表示当前文本输入框中的字符串，可在该方法中通过ajax向后台请求数据（数组形式的json对象），然后将返回的对象作为process的参数；
formatItem：function(item){}。对返回数据的具体某个json对象转化为字符串格式，用以显示在提示列表中，返回值：字符串；
setValue：function(item){}。选中提示列表某项时，设置文本输入框中显示的值以及实际需要获取的值。返回值格式：{'data-value':item["输入框显示值的item属性"],'real-value':item["实际需要获取值的item属性"]}，后期可通过文本输入框的real-value属性获取该值；
items：自动完成提示的最大结果集数量，默认：8；
minLength：当前文本输入框中字符串达到该属性值时才进行匹配处理，默认：1；
delay：指定延时毫秒数后，才正真向后台请求数据，以防止输入过快导致频繁向后台请求，默认：500
具体请参考www.oschina.net/code/snippet_219811_19025

1.[代码][JavaScript]代码

<script> $('#sim_iccid').autocomplete({ source:function(query,process){ var matchCount = this.options.items;//允许返回结果集最大数量 $.get("www.soyiyuan.com/update/",{"iccid":query,"matchCount":matchCount},function(respData){ respData = $.parseJSON(respData);//解析返回的数据 return process(respData); }); }, formatItem:function(item){ return item["iccid"]+"("+item["mobile"]+")"; }, setValue:function(item){ return {'data-value':item["iccid"],'real-value':item["mobile"]}; } }); </script>

2.[代码]$data为一个二维数组

echo json_encode( $data )

3.[代码]需要返回的标准json格式

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