示例中仅列出了一些，用时候你可以自己再完善下，代码仅为您提供一种思路，希望对你是有帮助的

超文本标记语言

一

2

3

四

5

6

七

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

链接rel='样式表type=' text/CSS ' href=' http://www .jq 22。com/jquery/bootstrap-3。3 .4 .' CSS '

div class='g-container '

表单操作=' ' ' class=' basic-grey '

div class='form-group '

标签为='姓氏' class='控制标签'

公司选择：

/label

' div class='公司'

input class=' form-control ' type=' text ' placeholder='请选择id='js-groupId '

输入类型='隐藏id='groupId '

ul id='groupid '

Li data-id=' 827 ' a href=' JavaScript : void(0)'厦门集众筹智科技有限公司/a/li

Li data-id=' 826 ' a href=' JavaScript : void(0)'苏州高新区文体发展有限公司/a/li

Li数据-id=' 825 ' a href=' JavaScript : void(0)'美罗城测试/a/li

Li数据-id=' 824 ' a href=' JavaScript : void(0)'深圳市高收益科技开发有限公司/a/li

Li数据-id=' 823 ' a href=' JavaScript : void(0)'深圳市蜗爱生活科技开发有限公司/a/li

Li数据-id=' 815 ' a href=' JavaScript : void(0)'深圳市宇恒乐便利店管理有限公司/a/li

Li数据-id=' 814 ' a href=' JavaScript : void(0)'广东胜佳超市有限公司/a/li

Li数据-id=' 813 ' a href=' JavaScript : void(0)'顺义李先生说/a/li

Li数据-id=' 812 ' a href=' JavaScript : void(0)'十足集团股份有限公司/a/li

Li数据-id=' 811 ' a href=' JavaScript : void(0)'宏图三胞高科技术有限公司/a/li

Li数据-id=' 810 ' a href=' JavaScript : void(0)'九州连锁超市公司/a/li

Li数据-id=' 809 ' a href=' JavaScript : void(0)'李先生/a/li

Li数据-id=' 808 ' a href=' JavaScript : void(0)'李先生牛肉面快餐厅/a/li

Li数据-id=' 807 ' a href=' JavaScript : void(0)'李先生牛肉面快餐厅/a/li

Li数据-id=' 806 ' a href=' JavaScript : void(0)'美宜佳便利店有限公司/a/li

Li数据-id=' 805 ' a href=' JavaScript : void(0)'上海一嗨汽车租赁有限公司/a/li

Li数据-id=' 804 ' a href=' JavaScript : void(0)'龙湖商业地产（重庆区)/a/li

Li数据-id=' 803 ' a href=' JavaScript : void(0)'阜阳华联集团股份有限公司/a/li

Li数据-id=' 802 ' a href=' JavaScript : void(0)'百万庄园/a/li

Li数据-id=' 801 ' a href=' JavaScript : void(0)'百万庄园/a/li

Li数据-id=' 800 ' a href=' JavaScript : void(0)'上海恭胜酒店管理有限公司/a/li

Li data-id=' 799 ' a href=' JavaScript : void(0)'北京好伦哥餐饮有限公司/a/li

Li data-id=' 798 ' a href=' JavaScript : void(0)'富驿酒店集团有限公司/a/li

/ul

/div

/div

/form

/div

CSS:

一

2

3

四

5

6

七

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

div，li，ul {

边距n:0

padding:0

}

ul li {

列表样式：无；

}。基本-灰色{

宽度宽度：600像素

保证金：5% 10%;

}。基本灰色。公司{

位置：相对；

}。基本灰色。公司

位置：相对；

高度：210px

宽度：;

overflow-y : auto；

border:1px固体# DDD；

display:none

}。基本灰色ul li .公司

padding:3px 12px

}。基本灰色ul li:hover {

背景-color : # Bebe be；

光标：指针指针；

}。基本灰色。公司ul li.top {

位置：值；

top:0

}

js:

一

2

3

四

5

6

七

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

jQuery.expr[':'].Contains=function(a，I，m) {

返回(a.textContent || a.innerText || ' ').toUpperCase().(m[3]的索引.toUpperCase())=0；

};

函数filterList(list) {

$('#js-groupId ').bind('input propertychange '，function() {

var filter=$(this).val()；

if(筛选器){

$匹配=$(列表)。find('a:Contains(' filter ')).parent()；

$('li '，列表)。不是($matches).slide up()；

$匹配。下滑()；

} else {

$(列表)。find('li ').下滑()；

}

});

}

$(function() {

筛选器列表($(' # group id ')；

$('#js-groupId ').bind('focus '，function() {

$('#groupid ').下滑()；

}).bind('blur '，function() {

$('#groupid ').slide up()；

})

$('#groupid ').on('click '，' li '，function() {

$('#js-groupId ').val($(this).text())

$('#groupId ').val($(this).数据(' id ')

$('#groupid ').向上滑动()

});

})

本文转载自中文网