autocomplete.js 的使用示例

html内容:

<input type="text"  style=" " name="name" id="name" value="" />

<input type="hidden" style=" " name="id" id="id" value="" /> //可能并不需要显示

相关的jQuery内容:

第一步:(自行下载)引入autocomplete.js 

<script src="/js/jquery.autocomplete.min.js"></script>

第二步:获取涉及的全部数据

1.后台返回一个数组

var data = '<?php echo json_encode($all) ;?>'; // 后台这个可能渲染一个数组,可以转化为json字符串

扫描二维码关注公众号,回复: 2819155 查看本文章

var countries = JSON.parse(data); //由JSON字符串转换为JSON对象

2.直接本地内容

var countries = [

{ value: "苹果1", id: "1" },

{ value: "苹果2", id: "2" },

{ value: "苹果3", id: "3" }

];

第三步:赋值

var id ;

var name ;

$('#name').autocomplete({

lookup: countries,

onSelect: function (suggestion) {

id = suggestion.id;

name = suggestion.value;

$('#id').val(d); //将获取的内容赋值给相应的input

$('#name').val(name);

}

});

备注:学习阶段,不足之处希望大家多多指教

猜你喜欢

转载自blog.csdn.net/syy_666/article/details/81333654
今日推荐