精华内容
下载资源
问答
  • 下拉框输入自动匹配
    2020-12-20 10:02:01

    实现可输入+带自动匹配功能的下拉框,我试过以下几种方法:

    1.直接使用h5的新标签,对应demo如下:

    优点:节约js代码;

    缺点:IE 9及以下的IE浏览器 和 Safari 均不支持 标签(好像还有几个浏览器也不支持);重复点击输入框或者下拉图标并不能收回下拉列表;样式难以控制

    2.使用基于jQuery的select2插件(需要同时引入select2.css和select2.js),html部分代码如下:

    1

    2

    3

    js部分代码如下:

    $('.select2_test').select2({

    placeholder: "请选择所属选项",

    allowClear: true;

    });

    注意:与bootstrap的Modal模态框结合使用时,会出现下拉列表出现在遮罩层的底层和点击弹出框关闭按钮但下拉列表并没有消失的问题,找了半天原来问题出在select2.css这个样式表中,

    原因:点击输入框,此插件会生成一个遮罩层(类名为.select2-drop-mask)和一个下拉列表(类名为.select2-drop),这两者的层叠性(z-index)依次为9991,9992,但是modal弹出框的层叠性大于10000,所以才会导致出现上述两个问题

    解决办法:如果将.select2-drop-mask和.select2-drop的z-index分别提高到19991、19992,下拉列表成功显示在上面,但在打开了下拉列表的前提下点击modal弹出框的关闭按钮会先收回下拉框,再次点击才能关闭弹出窗,用户体验不是很好;这里可以尝试提高关闭按钮的z-index,前提一定要父元素不能是modal弹出框,否则其提高的z-index无效。

    如果想更深入了解select2.js插件,可以参考http://www.cnblogs.com/liuxiaobo93/p/5112993.html

    3.造成select2.js上述不适的主要原因在于.select2-drop的失去焦点是要点到select2-drop-mask上才能触发,为改善这种机制,这里推荐另一款基于jQuery的下拉搜索框插件magicsuggest(需要同时引入magicsuggest.css和magicsuggest.js),html部分很简单,直接就是:

    更多相关内容
  • 加入上下键选择功能,回车键选择结果,20170830 博文链接:https://davidhhs.iteye.com/blog/2268888
  • 主要介绍了ASP .NET 可编辑输入自动匹配下拉框,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 实现可输入+带自动匹配功能的下拉框,我试过以下几种方法: 1.直接使用h5的新标签,对应demo如下: <input list=browsers> 优点:节约js代码; 缺点:IE 9及以下的IE浏览器 和 Safari 均不支
  • 过去重写过几次JComboBox类,都是实现了自动匹配输入更改下拉框选项的功能,但是与之前的所写的程序的耦合度太高,因此便想要重写一个实现功能的同时还是高内聚的JComboBox类。 原本的下拉框数据: 未输入时: / ...

    过去重写过几次JComboBox类,都是实现了自动匹配输入更改下拉框选项的功能,但是与之前的所写的程序的耦合度太高,因此便想要重写一个实现功能的同时还是高内聚的JComboBox类。
    原本的下拉框数据:

    Vector<String> vector = new Vector<String>();
    		vector.add("12");
    		vector.add("23");
    		vector.add("34");
    		vector.add("45");
    		vector.add("56");
    		vector.add("67");
    		vector.add("78");
    		vector.add("89");
    		vector.add("90");
    		vector.add("01");
    

    未输入时: / 输入123后再删去3再删去2再删去1时:
    在这里插入图片描述
    输入1时: / 输入123后删去3再删去2时:
    在这里插入图片描述
    再输入2时:/ 输入123后删去一个3时:
    在这里插入图片描述
    再输入3时:
    在这里插入图片描述
    MyJComboBox.java

    import java.awt.event.KeyEvent;
    import java.awt.event.KeyListener;
    import java.util.List;
    import java.util.Vector;
    import java.util.ArrayList;
    import java.util.Arrays;
    
    import javax.swing.DefaultComboBoxModel;
    import javax.swing.JComboBox;
    import javax.swing.JTextField;
    
    class MyJComboBox extends JComboBox<String>{
    	private JTextField comboBox_textField = (JTextField)this.getEditor().getEditorComponent();
    	private DefaultComboBoxModel<String> init_ComboBoxModel = null;
    	private JComboBox<String> this_comboBox = this;
    	private Vector<String> content = null;
    	
    	//无参构造函数
    	MyJComboBox(){
    		super();
    		initMyJComboBox();
    	}
    	
    	//字符串数组参数的构造函数
    	MyJComboBox(String[] items){
    		super(items);
    		List<String> list = new ArrayList<String>(Arrays.asList(items));
    		Vector<String> temp_content = new Vector<String>(list);
    		initMyJComboBox(temp_content);
    	}
    	
    	//动态字符串数组参数的构造函数
    	MyJComboBox(Vector<String> items){
    		super(items);
    		initMyJComboBox(items);
    	}
    	
    	//初始化NameComboBox,打开可编辑属性,打开下拉框联想功能,content赋初值
    	private void initMyJComboBox() {
    		this.setEditable(true);
    		openLenovo();
    		brush();
    	}
    	
    	private void initMyJComboBox(Vector<String> temp_content) {
    		initMyJComboBox();
    		updateDefaultModel(temp_content);
    	}
    	
    	//设置下拉框的联想数组
    	private void setLenovo() {
    		String target = getText().trim();
    		if ((target.trim()).equals("")) {
    			recoverModel();
    		}else {
    			Vector<String> lenovo = getLenovo(target);
    			if (lenovo.size() == 0) {
    				this_comboBox.setModel((new DefaultComboBoxModel<String>(new String[] {""})));
    			}else {
    				setItems(lenovo);
    			}
    		}
    		brush(target);
    	}
    	
    	//打开下拉框联想功能
    	private void openLenovo() {
    		this.getEditor().getEditorComponent().addKeyListener(new KeyListener() {
    
    			@Override
    			public void keyPressed(KeyEvent arg0) {
    				// TODO 自动生成的方法存根
    			}
    
    			@Override
    			public void keyReleased(KeyEvent arg0) {
    				// TODO 自动生成的方法存根
    				setLenovo();
    				this_comboBox.showPopup();
    			}
    
    			@Override
    			public void keyTyped(KeyEvent arg0) {
    				// TODO 自动生成的方法存根
    			}
    		});
    	}
    	
    	//获取联想数组
    	private Vector<String> getLenovo(String target){
    		Vector<String> lenovo = new Vector<String>();
    		for (int i = 0; i < content.size(); i++) {
    			if (content.elementAt(i).contains(target)) {
    				lenovo.add(content.elementAt(i));
    			}
    		}
    		return lenovo;
    	}
    	
    	//设置comboBox自身的文本框中的文本
    	public void setText(String text) {	
    		comboBox_textField.setText(text);
    	}
    	
    	//返回comboBox自身的文本框中的文本
    	public String getText() {	
    		return comboBox_textField.getText();
    	}
    	
    	//返回comboBox自身的文本框
    	public JTextField getTextField() {	
    		return comboBox_textField;
    	}
    	
    	//设置下拉框内容
    	public void setItems(Vector<String> items) {
    		this.setModel(new DefaultComboBoxModel<String>(items));
    	}
    	
    	//参数为新的Vector<String>元素,更新模组,只能通过构造函数和外部调用来更新
    	public void updateDefaultModel(Vector<String> new_content) {
    		content = new_content;
    		init_ComboBoxModel = new DefaultComboBoxModel<String>(content);
    		this.setModel(init_ComboBoxModel);
    		brush();
    	}
    	
    	//恢复原始内容下拉框
    	private void recoverModel() {
    		this.setModel(init_ComboBoxModel);
    	}
    	
    	//刷新
    	private void brush() {
    		this.setSelectedIndex(-1);
    		setText("");
    	}
    	
    	//刷新输入文本,避免自动填充影响使用体验
    	private void brush(String text) {
    		brush();
    		comboBox_textField.setText(text);
    	}
    	
    }
    
    

    TestFrame.java

    import java.awt.EventQueue;
    import java.awt.Toolkit;
    import java.util.Vector;
    
    import javax.swing.JFrame;
    import javax.swing.JPanel;
    import javax.swing.border.EmptyBorder;
    
    public class TestFrame extends JFrame {
    
    	private JPanel contentPane;
    
    	/**
    	 * Launch the application.
    	 */
    	public static void main(String[] args) {
    		EventQueue.invokeLater(new Runnable() {
    			public void run() {
    				try {
    					TestFrame frame = new TestFrame();
    					frame.setVisible(true);
    				} catch (Exception e) {
    					e.printStackTrace();
    				}
    			}
    		});
    	}
    
    	/**
    	 * Create the frame.
    	 */
    	public TestFrame() {
    		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    		setBounds(100, 100, 450, 300);
    		contentPane = new JPanel();
    		contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
    		setContentPane(contentPane);
    		contentPane.setLayout(null);
    		
    		Vector<String> vector = new Vector<String>();
    		vector.add("12");
    		vector.add("23");
    		vector.add("34");
    		vector.add("45");
    		vector.add("56");
    		vector.add("67");
    		vector.add("78");
    		vector.add("89");
    		vector.add("90");
    		vector.add("01");
    		MyJComboBox comboBox = new MyJComboBox(vector);
    		comboBox.setBounds(145, 102, 147, 36);
    		contentPane.add(comboBox);
    		
    		//居中显示
    		Toolkit toolKit = Toolkit.getDefaultToolkit();
    		int x = (int) (toolKit.getScreenSize().getWidth() - getWidth()) / 2;
    		int y = (int) (toolKit.getScreenSize().getHeight() - getHeight()) / 2;
    		setLocation(x, y);
    	}
    
    }
    
    展开全文
  • NULL 博文链接:https://hw1287789687.iteye.com/blog/2217653
  • 下拉框模糊查询; 可以输入可以直接选择,自动匹配; 非常简单,快捷
  • 自动匹配,可输入可选择的下拉框 可手写,可选择 方便实用。
  • 这是一个实现下拉框输入的有自动补全等功能 这是一个实现下拉框输入的有自动补全等功能 这是一个实现下拉框输入的有自动补全等功能 这是一个实现下拉框输入的有自动补全等功能
  • }, 输入框输入事件 inputmichead: function (val) { this.busFuzzyMatching(val); }, //模糊匹配公方法 busFuzzyMatching: function (val) { if (val != "") { this.queryCompany = []; this.temporary = []; ...
    <el-input
                class="query must-bakcground"
                v-model="queryForm.michead"
                :placeholder="
                  $t('message.forecastParcel.qingxuanzekuaidigongsi')
                "
                @focus="focusmichead"
                @blur="blurmichead"
                @input="inputmichead(queryForm.michead)"
              ></el-input>
              <transition name="el-zoom-in-top">
                <div class="michead-list" v-if="CompanYvisable">
                  <div class="arrow"></div>
                  <ul>
                    <li
                      v-for="(item, index) in queryCompany"
                      :key="index"
                      @click="CompanyBtn(item.description)"
                      v-html="item.description"
                    ></li>
                  </ul>
                </div>
              </transition>
    

    这里是引入第三方的插件通过对下下拉框数据进行检索,找到相关的字符
    import pinyinMatch from “pinyin-match”;

    这几个是定义在data里面的变量
    expressCompany: [],
    queryCompany: [],
    temporary: [],
    CompanYvisable: false,

    获取焦点
    focusmichead: function () {
          this.CompanYvisable = true;
         这里的参数val是你输入框上绑定的值
          this.busFuzzyMatching(this.queryForm.michead);
        },
    
        blurmichead: function () {
          setTimeout(() => {
            this.CompanYvisable = false;
          }, 200);
        },
    
    	输入框输入事件
        inputmichead: function (val) {
          this.busFuzzyMatching(val);
        },
    	
    	//模糊匹配公方法
        busFuzzyMatching: function (val) {
          if (val != "") {
            this.queryCompany = [];
            this.temporary = [];
            let list = JSON.stringify(this.expressCompany);
            let arr = JSON.parse(list);
            arr.forEach((item) => {
              if (
                item.description.indexOf(val) != -1 ||
                item.desc_qp.indexOf(val) != -1 ||
                item.desc_jp.indexOf(val) != -1
              ) {
                this.temporary.push(item);
              }
            });
            if (this.temporary.length != 0) {
              this.temporary.forEach((item) => {
                item.description = item.description.replace(/<.*?>/gi, "");
                item.desc_qp = item.desc_qp.replace(/<.*?>/gi, "");
                item.desc_jp = item.desc_jp.replace(/<.*?>/gi, "");
              });
            }
            this.queryCompany = this.temporary;
            this.queryCompany = [...new Set(this.queryCompany)];
            this.changeColor(this.queryCompany);
          } else {
            this.queryCompany = this.expressCompany;
            this.temporary = [];
          }
        },
    	
    	下拉框数据点击事件
        CompanyBtn: function (val) {
          this.queryForm.michead = val.replace(/<.*?>/gi, "");
        },
    
    	//模糊匹配高亮的方法
        changeColor(resultsList) {
          if (resultsList && resultsList.length > 0) {
            resultsList.map((item, index) => {
              item.coordinate = pinyinMatch.match(
                item.description,
                this.queryForm.michead
              );
    
              // 匹配关键字正则
              item.keyscord = item.description.substr(
                item.coordinate[0],
                item.coordinate[1] + 1
              );
              item.replaceReg = new RegExp(item.keyscord, "g");
              item.replaceString =
                '<span style="color:#ff6600;">' + item.keyscord + "</span>";
    
              if (this.queryForm.michead && this.queryForm.michead.length > 0) {
                item.description = item.description.replace(
                  item.replaceReg,
                  item.replaceString
                );
              }
            });
            this.queryCompany = resultsList;
            console.log(resultsList);
          } else {
            this.queryCompany = [];
          }
        },
    
    展开全文
  • 模糊搜索下拉框(可输入+自动匹配) 实现可输入+带自动匹配功能的下拉框,我试过以下几种方法: 1.直接使用h5的新标签,对应demo如下: <input list="browsers"> <datalist id="browsers">...

    实现可输入+带自动匹配功能的下拉框,我试过以下几种方法:

    1.直接使用h5的新标签,对应demo如下:

    <input list="browsers">
    <datalist id="browsers">
      <option value="Internet Explorer">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
    </datalist>
    

    优点:节约js代码;

    缺点:IE 9及以下的IE浏览器 和 Safari 均不支持 标签(好像还有几个浏览器也不支持);重复点击输入框或者下拉图标并不能收回下拉列表;样式难以控制

    2.使用基于jQuery的select2插件(需要同时引入select2.css和select2.js),html部分代码如下:

    <select class="select2_test" >
        <option></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    

    js部分代码如下:

    $('.select2_test').select2({
        placeholder: "请选择所属选项",
        allowClear: true;
    });   
    

    **注意:与bootstrap的Modal模态框结合使用时,会出现下拉列表出现在遮罩层的底层和点击弹出框关闭按钮但下拉列表并没有消失的问题,找了半天原来问题出在select2.css这个样式表中,

    原因:点击输入框,此插件会生成一个遮罩层(类名为.select2-drop-mask)和一个下拉列表(类名为.select2-drop),这两者的层叠性(z-index)依次为9991,9992,但是modal弹出框的层叠性大于10000,所以才会导致出现上述两个问题

    解决办法:如果将.select2-drop-mask和.select2-drop的z-index分别提高到19991、19992,下拉列表成功显示在上面,但在打开了下拉列表的前提下点击modal弹出框的关闭按钮会先收回下拉框,再次点击才能关闭弹出窗,用户体验不是很好;这里可以尝试提高关闭按钮的z-index,前提一定要父元素不能是modal弹出框,否则其提高的z-index无效。

    如果想更深入了解select2.js插件,可以参考http://www.cnblogs.com/liuxiaobo93/p/5112993.html

    3.造成select2.js上述不适的主要原因在于.select2-drop的失去焦点是要点到select2-drop-mask上才能触发,为改善这种机制,这里推荐另一款基于jQuery的下拉搜索框插件magicsuggest(需要同时引入magicsuggest.css和magicsuggest.js),html部分很简单,直接就是:

    <div id="magicsuggest"></div>
    

    js部分代码如下:

    $('#magicsuggest').magicSuggest({
      placeholder:'',
      allowFreeEntries: false,
      maxSelection:1,
      autoSelect:true,
      valueField:"id",
      displayField:"value",
      resultAsString:true,
      selectionStacked: true,
      highlight:false,
      data: ['Paris', 'New York', 'Gotham']
    });
    

    优点:不会出现层叠性冲突的问题;样式美观;允许多项选择

    缺点:多余的样式较多(阴影、高亮、错误提示、多选),需要根据具体需要调整样式;不能直接通过$(this).val()来获取原输入框的值;数据量过大时加载会出现延迟

    4.鉴于上面那个插件默认的是多选的样式,用到项目里也不能直接获取标签里的值,这里我个人推荐chosen这款插件(需要同时引入chosen.css和chosen.js),html部分代码如下:

    <select data-placeholder="Type 'C' to view" style="width:100%" class="myselect chosen-select-no-results" tabindex="10">
        <option value=""></option>
        <option>American Black Bear</option>
        <option>Asiatic Black Bear</option>
        <option>Brown Bear</option>
        <option>Giant Panda</option>
        <option>Sloth Bear</option>
        <option>Sun Bear</option>
        <option>Polar Bear</option>
        <option>Spectacled Bear</option>
    </select>
    

    js部分代码如下:

    var config = {
      '.chosen-select':{},
      '.chosen-select-deselect':{allow_single_deselect:true},
      '.chosen-select-no-single':{disable_search_threshold:10},
      '.chosen-select-no-results':{no_results_text:'Oops, nothing found!'},
      '.chosen-select-width':{width:"95%"}
    }
    for (var selector in config) {
      $(selector).chosen(config[selector]);
    }
    

    **注意:如果与bootstrap的Modal模态框结合使用时,会出现下拉列表显示不出来, 同时.modal-body右侧出现滚动条,原因就在于bootstrap给.modal-body设置了一个overflow-y:auto的默认样式,所以解决办法就是给.modal-body添加一个overflow-y:visible的样式来覆盖它。网上还有一些关于jquery-chosen的教程,推荐阅读这篇博文http://www.cnblogs.com/pshay/archive/2012/12/11/2813877.html

    5.当然,实现相同功能的jQuery插件还有很多,具体可以参考http://www.cnblogs.com/lhb25/p/form-enhanced-with-javascript-three.html**

    展开全文
  • 可以输入自动匹配下拉框

    热门讨论 2013-04-26 14:43:13
    类似百度搜索框,可以输入下拉框输入信息后能自动匹配数据库里的数据,如果数据库里有马上都能显示出啦,用下拉选择马上可以选择。带数据库功能。本代码通过网友的代码改编整合。
  • ASP .NET Webform 利用Telerik第三方Dropdownlist控制实现可编辑,输入自动匹配下拉框(支持中文输入匹配),代码简单,适合下拉列表选项多时使用该控件,快速检索选项
  • 下拉框(可输入+自动匹配)--gxy

    千次阅读 2017-12-27 17:47:20
    地址来源: https://www.cnblogs.com/brandonhulala/p/5990482.html实现可输入+带自动匹配功能的下拉框,我试过以下几种方法:1.直接使用h5的新标签,对应demo如下: <opt
  • 文本下拉框自动匹配

    2014-06-03 15:21:56
    文本下拉框自动匹配
  • 1.2出现输入值能够自动匹配的功能 动态的加载一个临时的div出现在该input下方,当点击页面中的空白地方,div隐藏。 1.3代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8...
  • 自动匹配,像我们平时用的百度,谷歌,如果输入某个字下面会自动匹配出很多内容来,让我们用起来很方便。我们平时做项目,下拉框用DropDownList很方便,绑定数据库即可把数据显示在下拉框中,方便快捷,但是为了更好...
  • 备注:下拉框中所有的字符串和字符串的数量都写入了配置文件之中,程序初始化时会从配置文件中读取字符串添加到下拉框。 大致如下:[COMSTR] NUM=3 Str01=hello Str02=world Str03=mfc 两个自定义函数: 函数名:...
  • 方便:可输可选/支持键盘操作/模糊过滤/自动完成匹配 标准:通过继承combobox实现,可单独使用,也可嵌入datagridview使用 水平有限,欢迎大家多提宝贵意见,共同学习 QQ:41357935 本控件以“随风飘散”在 ...
  • 目前找到的比较好的文本框自动匹配,自己的项目里面也是用了这个,主要是比较好移植
  • MFC Combox自动提示输入

    2020-11-25 23:30:14
    利用 CCombobox 实现百度,google自动匹配,当用户在输入框输入内容时,在下拉框中自动提示与用户输入内容相匹配的项,供用户选择。MFC没有自动提示输入的控件,因此用CComboBox实现,在编程过程中会遇到一些问题,...
  • 有时为了方便用户输入,我们会基于数据库中的数据或者用户的历史数据来为用户提供便捷输入的功能。...Excel中,你输入前几个字,也会帮你匹配文件中已经输入的记录。 本文以ElementUi为例,来看下如何方便的实现功能。
  • 我们要获取远程mock中所有学生的学号信息,根据输入的数据来远程查找目标,并且在选中该目标后能够自动填充对应的姓名、生日、手机等信息,实现快速获取信息的功能,再也不用手动一个个去输入所有的数据啦~ ...
  • 自定义下拉列表提示输入框,可以自行进行匹配输入文本进行提示 源码:https://github.com/fengyufuchen/JavaSwing-.git
  • 下拉框自动匹配文本框输入内容

    热门讨论 2008-08-29 13:40:35
    下拉框内容匹配文本框的输入,一个小例子,希望对新手有帮助。
  • 输入下拉框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....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,548
精华内容 5,019
关键字:

下拉框输入自动匹配