表单自动补全,从后台传值与id进来,并且将id值提交给后台

从后台获取数据,转换成数组格式

var autoComplete = new AutoComplete(‘keyword‘, ‘auto‘, [<?php foreach($jqname as $key => $dd){$str=$str."‘".$dd[‘title‘]."‘,";}$str=substr($str,0,$str.length-1);echo $str; ?>]);

 

从后台获取数据,并将其转换成为json格式,设置隐藏域

<input type="hidden" value=‘<?php echo json_encode($jqname) ?>‘ id="jq_json" />

 

设置隐藏域,存放id

<input type="hidden" id="jqid" name="jqid" value="" />

 

在鼠标事件和键盘事件中添加,动态设置id

//模拟鼠标移动至DIV时,DIV高亮

autoOnmouseover : function(_this, _div_index) {

return function() {

_this.index = _div_index;

var length = _this.autoObj.children.length;

for ( var j = 0; j < length; j++) {

if (j != _this.index) {

_this.autoObj.childNodes[j].className = ‘auto_onmouseout‘;

} else {

_this.autoObj.childNodes[j].className = ‘auto_onmouseover‘;

_this.obj.value = _this.autoObj.childNodes[j].seq;

var jq_json=document.getElementById("jq_json").value;

var data = eval(jq_json);//格式化成数组

for(var t = 0; t<data.length; t++){

if(data[t][‘title‘]==_this.obj.value){

var td=document.getElementById("jqid");

td.value=data[t][‘aid‘];

break;

}

}

}

}

}

},

//更改classname

changeClassname : function(length) {

for ( var i = 0; i < length; i++) {

if (i != this.index) {

this.autoObj.childNodes[i].className = ‘auto_onmouseout‘;

} else {

this.autoObj.childNodes[i].className = ‘auto_onmouseover‘;

this.obj.value = this.autoObj.childNodes[i].seq;

var jq_json=document.getElementById("jq_json").value;

var data = eval(jq_json);//格式化成数组

for(var j = 0; j<data.length; j++){

if(data[j][‘title‘]==this.obj.value){

var td=document.getElementById("jqid");

td.value=data[j][‘aid‘];

break;

}

}

}

}

},

时间: 2024-11-06 20:04:39

表单自动补全,从后台传值与id进来,并且将id值提交给后台的相关文章

表单自动补全功能:

bootstrap的bootstrap-typeahead.js jQuery的autocomplete.js js实现自动补全 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } .aut

js 实现类似百度联想输入,自动补全功能

js  实现类似百度联想输入,自动补全功能 方案一: search是搜索框id="search" 1 //点击页面隐藏自动补全提示框 2 document.onclick = function (e) { 3 var e = e ? e : window.event; 4 var tar = e.srcElement || e.target; 5 if (tar.id != search) { 6 if ($("#" + auto).is(":visibl

jquery autocomplete 自动补全

写在前面 autocomplete是jqueryUI里的一个插件 效果和说明可以访问这里,作用类似于搜索时的自动提示: 相信用过jQuery autocomplete 自动补全功能同学有不少,但是往往我们所对应的需求不同,有的仅仅是为了省事,敲两个字就有一堆可供选择的信息可供选择,但并不是所有需求都是这样的,我们还有这样的需求,敲两个字,将这个文字对应的实体绑定出来. 主要的参数 jQuery UI Autocomplete常用的参数有: Source:用于指定数据来源,类型为String.Ar

【Bootstrap】 typeahead自动补全

typeahead 这篇文章记录了我在使用typeahead的一些问题,不是很全,但是基本够用. Bootstrap提供typeahead组件来完成自动补全功能. 两种用法: 直接给标签添加属性 <input type="text" data-provide="typeahead"> 通过设置autocomplete="off"来关闭浏览器自带的自动补全功能,以防跟我们的产生冲突. 通过JavaScript 调用$('.typeahe

drf序列化高级、自定义只读只写、序列化覆盖字段、二次封装Response、数据库查询优化(断关联)、十大接口、视图家族、自动补全图片链接

目录 自定义只读 自定义只写 序列化覆盖字段 二次封装Response 数据库关系分析 断外键关联关系 ORM操作外键关系 ORM四种关联关系 基表 序列化类其他配置(了解) 十大接口 BaseSerializer初始化方法 十大接口序列化总结 单查群查 单增群增 单删群删 单整体改/群整体改 单局部改/群局部改 群增群改配置 十大接口小结 字段提供就校验,不提供拉到 DjangoORM内置优化机制:一次最多查21条数据 models.py response.py serializers.py

自动补全 多输入, 适合新闻标签

2015年5月12日 20:16:48 星期二 js+css 1 <script type="text/javascript"> 2 var ac_domain = 'http://'+document.domain+'/'; 3 initAutoComplete(); 4 function initAutoComplete() 5 { 6 var ac_input = document.getElementById('auto_complete_input'); 7 if

JS实现在输入框内输入@时,邮箱账号自动补全

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"/> <title>邮箱自动补全</title> <style type="text/css"> .wrap{width:200px;margin:0 auto;} h1{font-size:36px;text-align:center;lin

easyui-combobox 实现简单的自动补全功能

前台: Html页面 <input id="clsydw" name="clsydw" class="easyui-combobox" data-options="" /> JS //自动补全功能 $("#clsydw").combobox({ valueField:'syr', textField:'syr', panelWidth:200, panelHeight:'auto', onCha

非常好用的JQuery自动补全插件bigautocomplete

自动补全插件,有些功能有限,有些是老外做的,不支持中文.今天发现一个国人做的,叫做bigautocomplete,还不错. 官网下载地址:http://code.google.com/p/jquery-bigui/downloads/list 如果不想翻墙的话,可以从这里下载(已经转码为UTF-8):http://download.csdn.net/detail/clementad/8917219 使用步骤: 1.把两个js和css文件放到项目中: 2.在项目页面中引用: <script src