精华内容
下载资源
问答
  • 本文实例讲述了Angular实现下拉框模糊查询功能。分享给大家供大家参考,具体如下:前两天研究了一下angularjs,不得不说angularjs的mvc思想还是很强大的。对应偏重于数据处理的项目还是非常有优势的。写了个搜索...

    本文实例讲述了Angular实现下拉框模糊查询功能。分享给大家供大家参考,具体如下:

    前两天研究了一下angularjs,不得不说angularjs的mvc思想还是很强大的。对应偏重于数据处理的项目还是非常有优势的。

    写了个搜索下拉框的demo,注释在里边都写了,就不再这罗嗦了。

    1. 普通方式实现

    www.jb51.net Angular模糊匹配

    {{data}}

    angular输入选择框

    逻辑实现步骤

    1文本框做输入,并监控器change事件,在change事件中获取输入值,获取的输入值与选择框中的各个下拉项进行比较

    2如果包含则只显示包含的部分,不包含则显示全部

    var app = angular.module('myApp', []);

    app.controller('myCtrl', function($scope) {

    $scope.datas = ["key4","xyz","key3","xxxx","key2","value2","key1","value1"]; //下拉框选项

    $scope.tempdatas = $scope.datas; //下拉框选项副本

    $scope.hidden=true;//选择框是否隐藏

    $scope.searchField='';//文本框数据

    //将下拉选的数据值赋值给文本框

    $scope.change=function(x){

    $scope.searchField=x;

    $scope.hidden=true;

    }

    //获取的数据值与下拉选逐个比较,如果包含则放在临时变量副本,并用临时变量副本替换下拉选原先的数值,如果数据为空或找不到,就用初始下拉选项副本替换

    $scope.changeKeyValue=function(v){

    var newDate=[]; //临时下拉选副本

    //如果包含就添加

    angular.forEach($scope.datas ,function(data,index,array){

    if(data.indexOf(v)>=0){

    newDate.unshift(data);

    }

    });

    //用下拉选副本替换原来的数据

    $scope.datas=newDate;

    //下拉选展示

    $scope.hidden=false;

    //如果不包含或者输入的是空字符串则用初始变量副本做替换

    if($scope.datas.length==0 || ''==v){

    $scope.datas=$scope.tempdatas;

    }

    console.log($scope.datas);

    }

    });

    2. 指令方式实现

    www.jb51.net Angular模糊匹配

    angular输入选择框 自定义指令方式

    逻辑实现步骤

    1文本框做输入,并监控器change事件,在change事件中获取输入值,获取的输入值与选择框中的各个下拉项进行比较

    2如果包含则只显示包含的部分,不包含则显示全部

    var app = angular.module('myApp', []);

    app.controller('myCtrl', function($scope) {

    $scope.datas = ["key4","xyz","key3","xxxx","key2","value2","key1","value1"]; //下拉框选项

    });

    app.directive('selectSearch', function($compile) {

    return {

    restrict: 'AE', //attribute or element

    scope: {

    datas: '=',

    //bindAttr: '='

    },

    template:

    '

    'ng-click = "hidden=!hidden" value="{{searchField}}"/>'+

    '

    '+

    ' '+

    ' {{data}}'+

    ' '+

    '

    ',

    // replace: true,

    link: function($scope, elem, attr, ctrl) {

    $scope.tempdatas = $scope.datas; //下拉框选项副本

    $scope.hidden=true;//选择框是否隐藏

    $scope.searchField='';//文本框数据

    //将下拉选的数据值赋值给文本框

    $scope.change=function(x){

    $scope.searchField=x;

    $scope.hidden=true;

    }

    //获取的数据值与下拉选逐个比较,如果包含则放在临时变量副本,并用临时变量副本替换下拉选原先的数值,如果数据为空或找不到,就用初始下拉选项副本替换

    $scope.changeKeyValue=function(v){

    var newDate=[]; //临时下拉选副本

    //如果包含就添加

    angular.forEach($scope.datas ,function(data,index,array){

    if(data.indexOf(v)>=0){

    newDate.unshift(data);

    }

    });

    //用下拉选副本替换原来的数据

    $scope.datas=newDate;

    //下拉选展示

    $scope.hidden=false;

    //如果不包含或者输入的是空字符串则用初始变量副本做替换

    if($scope.datas.length==0 || ''==v){

    $scope.datas=$scope.tempdatas;

    }

    console.log($scope.datas);

    }

    }

    };

    });

    最终效果如下:

    f5cb8e17098bfcb6b9b3a35629ef52b4.gif

    注意这里对select标签设置了multiple属性,所以在页面上input标签能覆盖select标签

    如果不用multiple属性,需自行用div模拟实现select标签效果

    更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

    希望本文所述对大家AngularJS程序设计有所帮助。

    展开全文
  • 主要介绍了Select下拉框模糊查询功能实现代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了Angular实现下拉框模糊查询功能,涉及AngularJS事件响应及字符串查询等相关操作技巧,需要的朋友可以参考下
  • select下拉列表框支持输入模糊查询功能,设计非常的人性化,下面小编给大家分享了关键代码,大家根据自己的需求适当的添加修改,有任何问题欢迎给我反馈。关键代码如下所示:可输入的下拉框var j = 0;function ...

    select下拉列表框支持输入模糊查询功能,设计非常的人性化,下面小编给大家分享了关键代码,大家根据自己的需求适当的添加修改,有任何问题欢迎给我反馈。

    关键代码如下所示:

    可输入的下拉框

    var j = 0;

    function SelectValue(obj)

    {

    var input = obj.parentNode.nextSibling;

    document.all.box2.value = obj.options[obj.selectedIndex].text;

    document.getElementById("txtSection").value=obj.options[obj.selectedIndex].value;

    alert(document.getElementById("txtSection").value);

    }

    function InputValue(obj)

    {

    var n = 1;

    var tmpObj;

    var src = document.all.SelectOption;

    var msg = document.all.msg;

    if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13){

    if(obj.value!=""){

    msg.style.display="";

    msg.innerHTML="";

    if(msg.hasChildNodes())

    {

    msg.childNodes[0].parentNode.removeChild(msg.childNodes[0]);

    }

    for (var i=0;i

    var selValue = document.createElement("div");

    var selText = document.createElement("div");

    selText.value = src(i).value;

    selText.innerHTML = src(i).text;

    if (src(i).text.toLowerCase().indexOf(obj.value.toLowerCase())==0){

    selText.setAttribute("id","selText"+n);

    selText.οnmοuseοver=function (){

    this.style.backgroundColor='#003399';

    this.style.color ='#ffffff';

    }

    selText.οnmοuseοut=function (){

    this.style.backgroundColor='#ffffff';

    this.style.color ='#000000';

    }

    selText.οnclick=function (){

    document.all.box2.value = this.innerHTML;

    msg.style.display="none";

    document.getElementById("txtSection").value=this.value;

    }

    msg.appendChild(selText);

    n++;

    }

    }

    }

    else {

    document.all.msg.style.display="none";

    }

    }

    else {

    //press down key

    if(event.keyCode==40){

    j++;

    for (var i=0; i

    {

    tmpObj = document.getElementById("selText"+i);

    if(tmpObj != null){

    tmpObj.style.backgroundColor='#ffffff';

    tmpObj.style.color ='#000000';

    }

    }

    tmpObj = document.getElementById("selText"+j);

    if(tmpObj != null){

    tmpObj.style.backgroundColor='#003399';

    tmpObj.style.color ='#ffffff';

    }else{

    j = 0;

    }

    }

    //press up key

    if (event.keyCode==38){

    j--;

    for (var i=0; i

    {

    tmpObj = document.getElementById("selText"+i);

    if(tmpObj != null){

    tmpObj.style.backgroundColor='#ffffff';

    tmpObj.style.color ='#000000';

    }

    }

    tmpObj = document.getElementById("selText"+j);

    if(tmpObj != null){

    tmpObj.style.backgroundColor='#003399';

    tmpObj.style.color ='#ffffff';

    }else{

    j = 2;

    }

    }

    //press enter key

    if (event.keyCode==13){

    tmpObj = document.getElementById("selText"+j);

    document.all.box2.value = tmpObj.innerHTML;

    msg.style.display="none";

    document.getElementById("txtSection").value=tmpObj.value;

    }

    }

    }

    function SelMatch(src)

    {

    var currSel = document.all.box2.value;

    for (var i=0;i

    if (src(i).text==currSel)

    {

    src.options(i).selected = true;

    }

    }

    }

    function NoMsg()

    {

    if(document.activeElement.id=="msg")

    return false;

    else

    document.all.msg.style.display='none';

    }

    Section

    ALL

    0TEST1 = Testing 1

    0TEST2 = Testing 1

    0TEST3 = Testing 1

    SECTION = Section Description XXXXX AAA

    以上所述是小编给大家介绍的Select下拉框模糊查询功能实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

    时间: 2016-07-20

    展开全文
  • 下拉框模糊查询实现

    千次阅读 2016-04-15 16:14:25
    xSelectList Demo 下拉列表控件演示 ... * 模糊查询  * 返回参数 无   */ function xSelectList(c) { var me = this; this.id = c.id; this.dom = c.dom; this.usetype = c.usetype;
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> xSelectList Demo </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD>
    <BODY>
    下拉列表控件演示

    <HR>
    基于div生成
    <HR>
    <td><input id="zlis"></input></td>
    </BODY>
    </HTML>
    <script language="javascript">
    /* 
     * 模糊查询
     * 返回参数 无 
     */
    function xSelectList(c) {
    var me = this;
    this.id = c.id;
    this.dom = c.dom;
    this.usetype = c.usetype;
    this.ifmult = c.ifmult;
    this.defvalue = c.value;
    this.onchange = c.onchange;
    this.onselected = c.onselected;
    this.ondropdown = c.ondropdown;
    this.caption = c.caption;
    this.size = c.size;
    this.ui = {};
    this.ui.box = null;
    this.ui.btn = null;
    this.info = {};
    this.info.type = false;
    this.info.flag = false;
    this.info.tagname = "";
    this.info.readered = false;
    this.showdiv = null;
    this.showtab = null;
    this.data = [];
    this.result = [];
    this.keyword = "";
    this.isIE = navigator.userAgent.search('MSIE') > 0;
    this.config = {};
    this.config.css = {};
    this.config.css.box = "BORDER-RIGHT: Silver 1px solid;PADDING-RIGHT: 1px;BORDER-TOP: Silver 1px solid;PADDING-LEFT: 1px;FONT-SIZE: 12px;PADDING-BOTTOM: 1px;BORDER-LEFT: Silver 1px solid;COLOR: #000000;PADDING-TOP: 1px;BORDER-BOTTOM: Silver 1px solid;FONT-FAMILY:'宋体';BACKGROUND-COLOR: #fefefe;";
    this.config.css.textarea = "BORDER-RIGHT: Silver 1px solid;PADDING-RIGHT: 1px;BORDER-TOP: Silver 1px solid;PADDING-LEFT: 1px;FONT-SIZE: 12px;PADDING-BOTTOM: 1px;BORDER-LEFT: Silver 1px solid;COLOR: #000000;PADDING-TOP: 1px;BORDER-BOTTOM: Silver 1px solid;width:100%;FONT-FAMILY:'宋体';BACKGROUND-COLOR: #fefefe;SCROLLBAR-SHADOW-COLOR: #f9f8f5;SCROLLBAR-3DLIGHT-COLOR: #e5e4e0;SCROLLBAR-ARROW-COLOR: #88888;SCROLLBAR-TRACK-COLOR: #f9f8f5;SCROLLBAR-DARKSHADOW-COLOR: #e5e4e0";
    this.config.css.btn = "BORDER-RIGHT: gray 1px solid; BORDER-TOP: Silver 1px solid; FONT-SIZE: 12px; BORDER-LEFT: whitesmoke 1px solid; CURSOR: pointer; BORDER-BOTTOM: gray 1px solid;line-height:14px;FONT-FAMILY: marlett;";
    this.config.css.btn1 = "BORDER-RIGHT: gray 1px solid;width:18px; BORDER-TOP: Silver 1px solid; FONT-SIZE: 12px; BORDER-LEFT: whitesmoke 1px solid; CURSOR: pointer; BORDER-BOTTOM: gray 1px solid;";
    this.config.css.listdiv = "BORDER-LEFT: Silver 1px solid;visibility:visible;BORDER-RIGHT:Silver 1px solid;BORDER-BOTTOM: Silver 1px solid;position:absolute;overflow-y:hidden;SCROLLBAR-FACE-COLOR: #D2D2D2;SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;BACKGROUND-COLOR: #fefefe;SCROLLBAR-SHADOW-COLOR: #f9f8f5;SCROLLBAR-3DLIGHT-COLOR: #e5e4e0;SCROLLBAR-ARROW-COLOR: #88888;SCROLLBAR-TRACK-COLOR: #f9f8f5;SCROLLBAR-DARKSHADOW-COLOR: #e5e4e0;";// height:180px;left:795px;top:23px;width:158px;
    this.config.css.tableall = "FONT-FAMILY:'宋体';FONT-SIZE: 12px;CURSOR:pointer;cellpadding:0;cellspacing:0;BORDER-BOTTOM: Silver 0px solid;width:100%;";
    this.config.css.span = "FONT-SIZE: 12px;";
    if (c.dom == null || c.dom == "" || typeof (c.dom) == "undefined") {
    this.dom = document.body;
    } else {
    if (typeof (c.dom) == "string") {
    var tmpdom = document.getElementById(c.dom);
    if (!tmpdom) {
    tmpdom = document.getElementsByName(c.dom);
    }
    ;
    if (tmpdom) {
    this.dom = tmpdom;
    } else {
    this.dom = document.body;
    }
    } else {
    this.dom = c.dom;
    }
    }
    ;
    if (c.id == "" || c.id == null || typeof (c.id) == "undefined") {
    this.id = "xselectlist"
    }
    ;
    if (document.getElementById(this.id) || document.getElementsByName(this.id)) {
    if (document.getElementById(this.id)) {
    this.info.type = true;
    document.getElementById(this.id).name = this.id;
    } else {
    this.info.type = true;
    document.getElementsByName(this.id).id = this.id;
    }
    }
    ;
    if (c.onchange == "" || c.onchange == null
    || typeof (c.onchange) == "undefined") {
    this.onchange = function() {
    };
    } else {
    if (typeof (c.onchange) == "function") {
    this.onchange = c.onchange;
    } else {
    this.onchange = function() {
    };
    }
    }
    ;
    if (c.onselected == "" || c.onselected == null
    || typeof (c.onselected) == "undefined") {
    this.onselected = function() {
    };
    } else {
    if (typeof (c.onselected) == "function") {
    this.onselected = c.onselected;
    } else {
    this.onselected = function() {
    };
    }
    }
    ;
    if (c.ondropdown == "" || c.ondropdown == null
    || typeof (c.ondropdown) == "undefined") {
    this.ondropdown = function() {
    };
    } else {
    if (typeof (c.ondropdown) == "function") {
    this.ondropdown = c.ondropdown;
    } else {
    this.ondropdown = function() {
    };
    }
    }
    ;
    if (this.info.type) {
    var tmpnode = document.getElementById(this.id);
    if (tmpnode) {
    var nodeType = tmpnode.tagName.toLowerCase();
    this.info.tagname = nodeType;
    }
    }
    ;
    if (c.size == "" || c.size == null || typeof (c.size) == "undefined") {
    this.size = 20;
    } else {
    if (typeof (c.size) == "number") {
    this.size = c.size;
    } else {
    this.size = 20;
    }
    }
    ;
    if (c.caption == "" || c.caption == null
    || typeof (c.caption) == "undefined") {
    this.caption = "";
    } else {
    if (typeof (c.caption) == "string") {
    this.caption = c.caption;
    } else {
    this.caption = "";
    }
    }
    ;
    if (typeof (c.defvalue) == "undefined") {
    this.defvalue = "";
    }
    ;
    if (c.usetype == "" || typeof (c.usetype) == "undefined"
    || c.usetype == null) {
    this.usetype = "list";
    } else {
    this.usetype = c.usetype.toLowerCase();
    }
    ;
    if (this.usetype == "listbox") {
    if (c.ifmult == "" || c.ifmult == null
    || typeof (c.ifmult) == "undefined") {
    this.ifmult = false;
    } else {
    if (typeof (c.ifmult) == "boolean") {
    this.ifmult = c.ifmult;
    } else {
    this.ifmult = false;
    }
    }
    } else {
    this.ifmult = false;
    }
    ;
    this.reader = function() {
    if (this.info.readered) {
    return;
    }
    ;
    this.initui();
    this.initdefvalue();
    this.info.readered = true;
    };
    this.initui = function() {
    var nodeType = this.info.tagname;
    var d = [];
    if (nodeType == "select") {
    var nodes = document.getElementById(this.id).options;
    for (var i = 0; i < nodes.length; i++) {
    var dd = {};
    dd.value = nodes[i].value;
    dd.text = nodes[i].text;
    dd.idx = i;
    if (nodes[i].selected) {
    dd.select = true;
    } else {
    dd.select = false;
    }
    ;
    d.push(dd);
    }
    ;
    this.data = d;
    this.dom = document.getElementById(this.id).parentNode;
    this.dom.removeChild(document.getElementById(this.id));
    var oc = document.createElement("span");
    oc.style.cssText = this.config.css.span;
    oc.innerHTML = this.caption;
    var oo = document.createElement("input");
    oo.id = this.id;
    oo.name = this.id;
    oo.type = "text";
    oo.setAttribute("ivalue", "");
    oo.setAttribute("typeid", "");
    oo.setAttribute("idx", -1);
    oo.value = "";
    oo.style.cssText = this.config.css.box;
    oo.size = this.size;
    this.ui.box = oo;
    var ob = document.createElement("input");
    ob.id = this.id + "_btn";
    ob.name = this.id + "_btn";
    ob.type = "button";
    ob.style.cssText = this.isIE ? this.config.css.btn
    : this.config.css.btn1;
    ob.value = this.isIE ? "6" : "▼";
    this.ui.btn = ob;
    if (this.usetype == "filterlist") {
    this.ui.box.readOnly = false;
    this.ui.box.onfocus = this.onfocus;
    this.ui.box.onblur = this.onblur;
    this.ui.box.onkeyup = this.onkeyup;
    this.ui.box.onkeydown = this.onkeydown;
    } else {
    this.ui.box.readOnly = true;
    }
    ;
    this.ui.btn.onclick = this.dropdown;
    this.dom.appendChild(oc);
    this.dom.appendChild(this.ui.box);
    this.dom.appendChild(this.ui.btn);
    } else if (nodeType == "input") {
    this.dom = document.getElementById(this.id).parentNode;
    this.dom.removeChild(document.getElementById(this.id));
    var oc = document.createElement("span");
    oc.style.cssText = this.config.css.span;
    oc.innerHTML = this.caption;
    var oo = document.createElement("input");
    oo.id = this.id;
    oo.name = this.id;
    oo.type = "text";
    oo.setAttribute("ivalue", "");
    oo.setAttribute("typeid", "");
    oo.setAttribute("idx", -1);
    oo.value = "";
    oo.style.cssText = this.config.css.box;
    oo.size = this.size;
    this.ui.box = oo;
    var ob = document.createElement("input");
    ob.id = this.id + "_btn";
    ob.name = this.id + "_btn";
    ob.type = "button";
    ob.style.cssText = this.isIE ? this.config.css.btn
    : this.config.css.btn1;
    ob.value = this.isIE ? "6" : "▼";
    this.ui.btn = ob;
    if (this.usetype == "filterlist") {
    this.ui.box.readOnly = false;
    this.ui.box.onfocus = this.onfocus;
    this.ui.box.onblur = this.onblur;
    this.ui.box.onkeyup = this.onkeyup;
    this.ui.box.onkeydown = this.onkeydown;
    } else {
    this.ui.box.readOnly = true;
    }
    ;
    this.ui.btn.onclick = this.dropdown;
    this.dom.appendChild(oc);
    this.dom.appendChild(this.ui.box);
    this.dom.appendChild(this.ui.btn);
    } else {
    var oc = document.createElement("span");
    oc.style.cssText = this.config.css.span;
    oc.innerHTML = this.caption;
    var oo = document.createElement("input");
    oo.id = this.id;
    oo.name = this.id;
    oo.type = "text";
    oo.setAttribute("ivalue", "");
    oo.setAttribute("typeid", "");
    oo.setAttribute("idx", -1);
    oo.value = "";
    oo.style.cssText = this.config.css.box;
    oo.size = this.size;
    this.ui.box = oo;
    var ob = document.createElement("input");
    ob.id = this.id + "_btn";
    ob.name = this.id + "_btn";
    ob.type = "button";
    ob.style.cssText = this.isIE ? this.config.css.btn
    : this.config.css.btn1;
    ob.value = this.isIE ? "6" : "▼";
    this.ui.btn = ob;
    if (this.usetype == "filterlist") {
    this.ui.box.readOnly = false;
    this.ui.box.onfocus = this.onfocus;
    this.ui.box.onblur = this.onblur;
    this.ui.box.onkeyup = this.onkeyup;
    this.ui.box.onkeydown = this.onkeydown;
    } else {
    this.ui.box.readOnly = true;
    }
    ;
    this.ui.btn.onclick = this.dropdown;
    this.dom.appendChild(oc);
    this.dom.appendChild(this.ui.box);
    this.dom.appendChild(this.ui.btn);
    }
    };
    this.onfocus = function() {
    this.setAttribute("oldValue", this.value);
    if (me.showdiv) {
    me.offdisplay(false);
    }
    };
    this.onblur = function() {
    };
    this.onkeyup = function() {
    if (this.getAttribute("oldValue") == this.value) {
    return false;
    } else {
    me.keyword = this.value;
    if (me.keyword != "" && me.keyword != null) {
    me.filterdata();
    me.showlist();
    } else {
    me.offdisplay(false);
    }
    ;
    this.setAttribute("oldValue", this.value);
    }
    };
    this.onkeydown = function() {
    var evt = arguments[0];
    evt = (evt) ? evt : ((window.event) ? window.event : "");
    var key = evt.keyCode ? evt.keyCode : (evt.which ? evt.which
    : evt.charCode);
    if (key == 40) {
    if (me.showdiv) {
    if (me.showtab) {
    if (parseInt(me.showtab.getAttribute("rowcount")) >= 0) {
    var orow = document.getElementById(me.id
    + "_tab_rows_0");
    if (orow) {
    orow.onmouseover();
    if (me.isIE) {
    me.showtab.setActive();
    } else {
    }
    }
    }
    }
    }
    }
    ;
    if (key == 13) {
    me.offdisplay(false);
    }
    };
    this.dropdown = function() {
    var div = me.showdiv;
    if (div) {
    if (div.style.display == 'none') {
    me.keyword = "";
    me.result = me.data;
    me.showlist();
    } else {
    me.offdisplay(false);
    }
    } else {
    me.keyword = "";
    me.result = me.data;
    me.showlist();
    }
    };
    this.offdisplay = function(b) {
    if (me.showdiv) {
    if (b) {
    me.showdiv.style.display = '';
    me.ondropdown.call(me);
    } else {
    me.showdiv.style.display = 'none';
    }
    }
    };
    this.filterdata = function() {
    if (this.usetype != "filterlist") {
    return;
    }
    ;
    if (this.keyword == "" || this.keyword == null) {
    return;
    }
    ;
    var ilist = this.data;
    var d = [];
    var f = this.keyword;
    for (var i = 0; i < ilist.length; i++) {
    if (ilist[i].text.toLowerCase().indexOf(f.toLowerCase()) >= 0) {
    d.push(ilist[i]);
    }
    }
    ;
    this.result = d;
    };
    this.showlist = function() {
    var div;
    var ps;
    var mx = this.result.length + 2;
    if (mx > 10) {
    mx = 10;
    }
    ;
    ps = this.getoffset(this.ui.box, null);
    if (this.showdiv) {
    div = this.showdiv;
    //px不加ie7以上不支持
    div.style.width = ps.z + 17 + "px";
    div.style.left = ps.x + "px";
    div.style.height = ps.h * mx + "px";
    div.style.top = ps.y + 20 + "px";
    } else {
    div = document.createElement("div");
    div.id = this.id + "_listdiv";
    div.style.cssText = this.config.css.listdiv;
    div.style.width = ps.z + 17 + "px";
    div.style.height = ps.h * mx + "px";
    div.style.top = ps.y + 20 + "px";
    div.style.left = ps.x + "px";
    document.body.appendChild(div);
    }
    ;
    div.style.overflowY = "auto";
    div.style.overflowX = "hidden";
    div.innerHTML = "";
    this.offdisplay(true);
    var tab = div.appendChild(document.createElement("table"));
    tab.style.cssText = this.config.css.tableall;
    tab.id = me.id + "_tab";
    tab.setAttribute("rowcount", this.result.length);
    var keydown = function() {
    var evt = arguments[0];
    evt = (evt) ? evt : ((window.event) ? window.event : "");
    var key = evt.keyCode ? evt.keyCode : (evt.which ? evt.which
    : evt.charCode);
    var rowcount = parseInt(this.getAttribute("rowcount"));
    var currow = me.overrow;
    var curobj = me.overobj;
    if (key == 40) {
    if (currow < rowcount) {
    var orow = document.getElementById(this.id + "_rows_"
    + (currow + 1));
    if (orow) {
    if (curobj) {
    curobj.onmouseout();
    }
    ;
    orow.onmouseover();
    }
    }
    }
    ;
    if (key == 38) {
    if (currow == 0 || currow == -1) {
    me.ui.box.focus();
    me.offdisplay(false);
    } else {
    var orow = document.getElementById(this.id + "_rows_"
    + (currow - 1));
    if (orow) {
    if (curobj) {
    curobj.onmouseout();
    }
    ;
    orow.onmouseover();
    }
    }
    }
    ;
    if (key == 13) {
    if (curobj) {
    var oldidx = me.ui.box.getAttribute("idx");
    me.ui.box.value = curobj.getAttribute("text");
    me.ui.box.setAttribute("ivalue", curobj
    .getAttribute("value"));
    me.ui.box.setAttribute("idx", curobj.getAttribute("idx"));
    me.ui.box.setAttribute("typeid", curobj
    .getAttribute("value"));
    me.initselected(me.ui.box.getAttribute("idx"));
    if (oldidx != me.ui.box.getAttribute("idx")) {
    me.onchange.call(me);
    }
    ;
    me.onselected.call(me);
    me.ui.box.focus();
    me.offdisplay(false);
    }
    }
    ;
    if (key == 27) {
    me.ui.focus();
    me.offdisplay(false);
    }
    };
    if (this.isIE) {
    tab.onkeydown = keydown;
    } else {
    tab.addEventListener("keydown", keydown, false);
    }
    ;
    for (var i = 0; i < this.result.length; i++) {
    var row = tab.insertRow(-1);
    row.height = "20px";
    row.style.backgroundColor = "#f0f0f0";
    var cell = document.createElement("td");
    cell.noWrap = true;
    cell.setAttribute("value", this.result[i].value);
    cell.setAttribute("text", this.result[i].text);
    cell.setAttribute("idx", this.result[i].idx);
    cell.setAttribute("rows", i);
    cell.id = me.id + "_tab_rows_" + i;
    cell.innerHTML = this.result[i].text;
    cell.title = this.result[i].text;
    cell.innerHTML = "<span value='" + this.result[i].value
    + "' style='text-overflow:clip;overflow:hidden;width:"
    + ((ps.z - 6)) + "px;'>" + this.result[i].text + "</span>";
    cell.setAttribute("evnbgcolor", "#F0F0F0");
    if (this.usetype == "filterlist") {
    if (this.result[i].select) {
    cell.style.backgroundColor = "#FFFFCC";
    cell.setAttribute("oldbgcolor", "#FFFFCC");
    } else if (this.keyword.toLowerCase() == this.result[i].text
    .toLowerCase()) {
    cell.style.backgroundColor = "#FFFF99";
    cell.setAttribute("oldbgcolor", "#FFFF99");
    } else {
    cell.style.backgroundColor = "#FFFFFF";
    cell.setAttribute("oldbgcolor", "#FFFFFF");
    }
    } else {
    if (this.result[i].select) {
    cell.style.backgroundColor = "#FFFFCC";
    cell.setAttribute("oldbgcolor", "#FFFFCC");
    } else {
    cell.style.backgroundColor = "#FFFFFF";
    cell.setAttribute("oldbgcolor", "#FFFFFF");
    }
    }
    ;
    cell.style.overflowX = "hidden";
    var click = function() {
    var oldidx = me.ui.box.getAttribute("idx");
    me.ui.box.value = this.getAttribute("text");
    me.ui.box.setAttribute("ivalue", this.getAttribute("value"));
    me.ui.box.setAttribute("idx", this.getAttribute("idx"));
    me.ui.box.setAttribute("typeid", this.getAttribute("value"));
    me.initselected(me.ui.box.getAttribute("idx"));
    if (oldidx != me.ui.box.getAttribute("idx")) {
    me.onchange.call(me);
    }
    me.onselected.call(me);
    me.ui.box.focus();
    me.offdisplay(false);
    };
    var mouseover = function() {
    me.overrow = this.getAttribute("rows");
    me.overobj = this;
    this.style.backgroundColor = this.getAttribute("evnbgcolor");
    };
    var mouseout = function() {
    this.style.backgroundColor = this.getAttribute("oldbgcolor");
    };
    if (this.isIE) {
    cell.onmouseover = mouseover;
    cell.onmouseout = mouseout;
    cell.onclick = click;
    } else {
    cell.addEventListener("mouseover", mouseover, false);
    cell.addEventListener("mouseout", mouseout, false);
    cell.addEventListener("click", click, false);
    }
    ;
    row.appendChild(cell);
    }
    ;
    this.offdisplay(true);
    div.onclick = function() {
    me.offdisplay(false);
    };
    if (this.result.length == 0) {
    div.onmouseout = function() {
    me.offdisplay(false);
    }
    } else {
    div.onmouseout = function() {
    }
    }
    ;
    this.showdiv = div;
    this.showtab = tab;
    };
    this.initselected = function(idx) {
    var ilist = this.data;
    if (ilist.length < idx) {
    return;
    }
    ;
    for (var i = 0; i < ilist.length; i++) {
    ilist[i].select = false;
    }
    ;
    ilist[idx].select = true;
    this.data = ilist;
    };
    this.loaddata = function(d) {
    var ilist = [];
    var dd = d;
    var ifselect = false;
    for (var i = 0; i < dd.length; i++) {
    var m = {};
    if (typeof (dd[i].text) == "undefined") {
    m.text = "";
    } else {
    m.text = unescape(dd[i].text);
    }
    ;
    if (typeof (dd[i].value) == "undefined") {
    m.value = "";
    } else {
    m.value = unescape(dd[i].value);
    }
    ;
    if (typeof (dd[i].select) == "undefined") {
    m.select = false;
    } else {
    if (typeof (dd[i].select) != "boolean") {
    m.select = false;
    } else {
    m.select = dd[i].select;
    }
    }
    ;
    if (m.select) {
    ifselect = true;
    }
    ;
    m.idx = i;
    ilist.push(m);
    }
    ;
    if (!ifselect) {
    if (ilist.length > 0) {
    ilist[0].select = true;
    }
    }
    ;
    this.data = ilist;
    this.initdefvalue();
    };
    this.initdefvalue = function() {
    var ilist = this.data;
    var idx = -1;
    for (var i = 0; i < ilist.length; i++) {
    if (ilist[i].select) {
    idx = i;
    break;
    }
    }
    ;
    if (idx != -1) {
    this.ui.box.value = ilist[i].text;
    this.ui.box.setAttribute("ivalue", ilist[i].value);
    this.ui.box.setAttribute("idx", ilist[i].idx);
    this.ui.box.setAttribute("typeid", ilist[i].value);
    this.onselected.call(me);
    }
    };
    this.getoffset = function(obj, offsetObj) {
    var x = obj.offsetLeft;
    var y = obj.offsetTop;
    var z = obj.offsetWidth;
    var h = obj.offsetHeight;
    var tmpObj = obj.offsetParent;
    var _offsetObj = (offsetObj) ? offsetObj : document.body;
    while ((tmpObj != _offsetObj) && tmpObj) {
    x += tmpObj.offsetLeft - tmpObj.scrollLeft + tmpObj.clientLeft;
    y += tmpObj.offsetTop - tmpObj.scrollTop + tmpObj.clientTop;
    tmpObj = tmpObj.offsetParent;
    }
    ;
    var cls = {};
    cls.x = x;
    cls.y = y;
    cls.z = z;
    cls.h = h;
    return (cls);
    };
    }
    var tmpdata = [
    {text:"a",value:"0",select:false},
    {text:"ap",value:"1",select:false},
    {text:"app",value:"2",select:false},
    {text:"appl",value:"3",select:false},
    {text:"apple",value:"4",select:false},
    {text:"apple iphone",value:"0",select:false}
    ];
    var x2 = new xSelectList({id:"zlist",caption:"",usetype:"filterlist",onchange:function(){}});
    x2.reader();
    x2.loaddata(tmpdata1);
    </script>
    展开全文
  • 下拉框模糊查询-combo-select-master,实现下拉框的模糊查询
  • Insert title here function SelectValue(obj) { document.all.box2.value = obj.options[obj.selectedIndex].text; } var j = 0; function InputValue... } 查询 ALL 管理者1 管理者2 管理者3 业务员3 业务员3 13 103
    Insert title here

    function SelectValue(obj)

    {

    document.all.box2.value = obj.options[obj.selectedIndex].text;

    }

    var j = 0;

    function InputValue(obj)

    {

    var n = 1;

    var tmpObj;

    var src = document.all.SelectOption;

    var msg = document.all.msg;

    if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13){

    if(obj.value!=""){

    msg.style.display="";

    msg.innerHTML="";

    if(msg.hasChildNodes())

    {

    msg.childNodes[0].parentNode.removeChild(msg.childNodes[0]);

    }

    for (var i=0;i

    var selValue = document.createElement("div");

    var selText = document.createElement("div");

    selText.value = src(i).value;

    selText.innerHTML = src(i).text;

    if (src(i).text.toLowerCase().indexOf(obj.value.toLowerCase())==0){

    selText.setAttribute("id","selText"+n);

    selText.οnmοuseοver=function (){

    this.style.backgroundColor='#003399';

    this.style.color ='#ffffff';

    }

    selText.οnmοuseοut=function (){

    this.style.backgroundColor='#ffffff';

    this.style.color ='#000000';

    }

    selText.οnclick=function (){

    document.all.box2.value = this.innerHTML;

    msg.style.display="none";

    document.getElementById("txtSection").value=this.value;

    }

    msg.appendChild(selText);

    n++;

    }

    }

    }

    else {

    document.all.msg.style.display="none";

    }

    }

    else {

    //press down key

    if(event.keyCode==40){

    j++;

    for (var i=0; i

    {

    tmpObj = document.getElementById("selText"+i);

    if(tmpObj != null){

    tmpObj.style.backgroundColor='#ffffff';

    tmpObj.style.color ='#000000';

    }

    }

    tmpObj = document.getElementById("selText"+j);

    if(tmpObj != null){

    tmpObj.style.backgroundColor='#003399';

    tmpObj.style.color ='#ffffff';

    }else{

    j = 0;

    }

    }

    //press up key

    if (event.keyCode==38){

    j--;

    for (var i=0; i

    {

    tmpObj = document.getElementById("selText"+i);

    if(tmpObj != null){

    tmpObj.style.backgroundColor='#ffffff';

    tmpObj.style.color ='#000000';

    }

    }

    tmpObj = document.getElementById("selText"+j);

    if(tmpObj != null){

    tmpObj.style.backgroundColor='#003399';

    tmpObj.style.color ='#ffffff';

    }else{

    j = 2;

    }

    }

    //press enter key

    if (event.keyCode==13){

    tmpObj = document.getElementById("selText"+j);

    document.all.box2.value = tmpObj.innerHTML;

    msg.style.display="none";

    document.getElementById("txtSection").value=tmpObj.value;

    }

    }

    }

    function SelMatch(src)

    {

    var currSel = document.all.box2.value;

    for (var i=0;i

    if (src(i).text==currSel)

    {

    src.options(i).selected = true;

    }

    }

    }

    function NoMsg()

    {

    if(document.activeElement.id=="msg")

    return false;

    else

    document.all.msg.style.display='none';

    }

    查询

    ALL

    管理者1

    管理者2

    管理者3

    业务员3

    业务员3

    13

    103

    展开全文
  • keyup方法触发模糊查询 list : Array<any> //下拉列表所有内容 filtList:Array<any> //过滤后的内容 inputContent : string //输入的内容 方法一,filter()遍历: filtList = list.filter(data...
  • antd Select下拉框模糊查询

    千次阅读 2020-07-03 11:29:05
    antd Select下拉框模糊查询 //searchdata 点击旁边的查询按钮可以用的数据 state={ employeeList: [], //查询出来的数据 searchdata: { param: { ecommerce: null, }, }, } //Select下拉框最多显示一百条...
  • react下拉框模糊查询

    千次阅读 2019-01-22 16:24:52
    // 关联子公司的时候模糊查询 filterOption=(inputValue,option)=&amp;gt;{ if(option.key.indexOf(inputValue)!=-1){//模糊匹配 return true; }else{ return false; } } – 调方法 &amp;lt;Select...
  • asp:DropDownList 实现下拉框模糊查询(内容详细,粘贴可用) DropDownList 控件通过JS代码实现下拉框模糊查询功能,希望能帮到你! aspx 页面代码 <%-- 引用下拉模糊查询(具体使用时可以调整width、height、top...
  • 1、下载select2包 地址... 2、引入<link href="/css/select2.css"rel="stylesheet" /> 3、引入jQuery.js和select2.js <script type="text/javascript" src="/js/jquery-1.7.2.js">...script...
  • [img=https://img-bbs.csdn.net/upload/201612/16/1481876307_392264.png][/img] 点击广州 查询出名字带广州的所有信息 ,点击重庆查重庆有关所有信息 后台方法用同一个的
  • input下拉框模糊查询

    千次阅读 2018-09-07 11:54:57
    &lt;body&gt; &lt;input type="text" name="business" id="business" class="makeinp" placeholder="请选择或输入" onfocus="...
  • 下拉框模糊查询

    2019-03-05 14:49:16
    这样下拉框就支持智能补全和模糊查询了。 修改后的index.jsp代码如下: Select2 下拉框 <!-- /. ROW --> 选择框: <option value="" data-name="">- 篮球 - ...
  • ext4.1下拉框模糊查询

    2016-05-03 01:42:34
    现在使用ext4.1做下拉框模糊查询功能,在网上看了一下,想看的例子没说到点上,现在对ext4.1也不是很熟,目前使用是的下拉框的一个tpl的属性,采用ajax从后台拿数据,但是实现的效果不对,看了一下4.1的api,不...
  • angular下拉框模糊查询

    千次阅读 2017-09-14 17:56:04
    写了个搜索下拉框的demo,注释在里边都写了,就不再这罗嗦了。 1普通方式实现 <!DOCTYPE html> <html> <head lang="zh_CN"> <meta charset="utf-8"> ...
  • inputselec下拉框模糊查询1.[代码][JavaScript]代码//1 初始化时候,先将数据存入数组var TempArr = [];// 存贮optionvar SelectObj = document.frm.elements["demo"]/* 先将数据存入数组 */with (SelectObj){for (i ...
  • easyui下拉框模糊查询

    千次阅读 2018-08-17 16:54:17
    //这个方法,即可实现模糊查询 }, onSelect: function(rec){ var url = 'workOrderManagerAction!loadWorkOrderforCombox3.action?fgcode='+rec.id; $('#workorder').combobox('...
  • uniapp input 输入框加下拉框模糊查询

    千次阅读 2020-06-05 18:13:46
    我这个输入框是搜索加下拉框选择,我用了三个事件绑定他 一个是键盘输入触发事件 还有就是聚焦和失去聚焦触发事件 <view class="navinput"> <image :src="imgs" mode="" class="navlefts"></...
  • jquery实现页面动态切换的方法--toggleClass(className) $(function() { $(".A").click(function() { $(this).toggleClass("B"); }); }); 当点击带 ... 【转】Windows7打造全方位护眼系统 原文网址:...
  • 1、html代码块 需要引入bootstrap的css js jquery bootstrap.css bootstrap-select.min.css jquery-1.11.3.min.js bootstrap.min.js ... bootstrap-select.min.js ...select class="selectpick...
  • 1.引用js、css bootstrap.css 、 bootstrap-select.min.css bootstrap.min.js 、bootstrap-select.min.js 2. js初始化插件 $(window).on('load', ... // 中文重写select 查询为空提示信息
  • 源码地址:https://github.com/lzwme/bootstrap-suggest-plugin 有时间会完善!暂时有点忙!
  • 示例图片 实例直接可以用 &lt;!...模糊查询下拉框dome&lt;/title&gt; &lt;meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&gt
  • 1.效果图,实现模糊查询并将选择行的数据填充到输入框中 2. html <strong>客户名称:</strong> <div class="two-title input-group" style="width: 330px"> <input type="text" id="keyword...
  • <div class="layui-input-inline"> <input id="orderField3" name="orderField3" autocomplete="off" onclick="findUserWeiAndCheng('orderField3','auto_div_orderField3','firm','1...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,295
精华内容 1,318
关键字:

下拉框模糊查询的实现