//demo
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/styles.css"/> <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.mockjax.js"></script> <script src="js/jquery.autocomplete.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var countries ={}//分组模糊搜索
var countries ={};
var phoneNumberTeams = ['15556785678', '15567895678','15556896789','18867891235','13856235678','1397890456'];
var roomNumberTeams = [ '8888','8899','8866','8800','6688','6666','8886','6600'];
var nameNnmberTeams = ['郭德纲','岳云鹏','成龙','刘德华','angelababy','8古天乐'];
var phoneNumber = $.map(phoneNumberTeams, function (team) { return { value: team, data: { category: '手机号' }}; });
var roomNumber = $.map(roomNumberTeams, function (team) { return { value: team, data: { category: '房间号' } }; });
var nameNnmber = $.map(nameNnmberTeams, function (team) { return { value: team, data: { category: '姓名' } }; });
var teams = phoneNumber.concat(roomNumber,nameNnmber);
$('#indentSearchAutoComplete').devbridgeAutocomplete({
lookup: teams,
minChars: 1,
onSelect: function (suggestion) {
$('#selection').html('You selected: ' + suggestion.value + ', ' + suggestion.data.category);
},
showNoSuggestionNotice: true,
noSuggestionNotice: '对不起，没有搜索结果',
groupBy: 'category'
});
</script>
<title></title> </head> <body> <h2>支持分组</h2> <p>手机号/房号/姓名</p> <div> <input type="text" name="country" id="autocomplete"/> </div> </body></html>链接地址 https://www.devbridge.com/sourcery/components/jquery-autocomplete/