zoukankan      html  css  js  c++  java
  • Combox 实现百度收索框效果

    标题中所谓百度收缩框效果,就是在输入数据的时候,自动提示,来张图就明白了:


    用Combox来实现这个功能只是需要设置三个A开头的属性就OK了:AutoCompleteSource、AutoCompleteMode、AutoCompleteCustomSource


    AutoCompleteSource属性的设置

        获取或设置一个值,该值指定用于自动完成的完成字符串的源。也可以说是,指定用于自动完成的完成字符串的来源方式。其默认的属性值为None。但是在这里,我们要指定为CustomSource。

    AutoCompleteMode属性

        这个属性是用来获取或者设置作用于Combox控件下的方式,也就是自能提示功能的展现方式,有四个值:

    Append 将最可能的候选字符串的其余部分追加到现有的字符,并突出显示追加的字符。类似于Excel中输入数据时提示输入
    Suggest 显示与编辑控件关联的辅助下拉列表。此下拉列表填充了一个或多个建议完成字符串。百度的搜索框就是这样的效果
    SuggestAppand 上面两种功能的结合
    none 默认的属性


    此处选择的属性是第三个 SuggestAppand,提示的同时选择性的输入

    AutoCompleteCustomSource属性

        获取或设置在AutoCompleteSource属性设置为CustomSource时使用的自定义的集合,通过这个属性可以来设置提示的下拉列表框的值。是一个数组的形式

    注:下面这几句话是来自于MSDN中的原话

    1. 使用 AutoCompleteCustomSource AutoCompleteModeAutoCompleteSource 属性创建一个ComboBox,它可将所输入的字符串前缀与所维护源中的所有字符串的前缀进行比较来自动完成输入字符串的填写。 这对于频繁地有 URL、地址、文件名或命令输入其中的ComboBox 控件来说很有用。
    2. AutoCompleteCustomSource 属性的使用是可选的,但必须将AutoCompleteSource 属性设置为 CustomSource 后才能使用AutoCompleteCustomSource
    3. AutoCompleteModeAutoCompleteSource 属性必须一起使用。 

    TextChange事件

        这个事件,是输入文本框中的值改变的时候触发,由于用户输入的数据是不定的,故我们可以再这个事件中来设置AutoCompleteCustomSource 的值,也就是设置匹配的项。也可以在TextUpdate事件中来设置,但是这个事件中设置的效果不是很好,没有TextChange中反应那么及时。在这个事件中使用的匹配数据源是在窗体的加载事件中提供的下拉数据源,并且把这个数据源存放在一个List<string>集合lists中,所以可以直接使用,当然也可以从数据库中通过模糊查询进行匹配来获得数据源。

    TextChange的代码如下:
    <span style="font-size:18px;">private void cbAcupoint_TextChanged (object sender, EventArgs e)
            {
                string txt = cbAcupoint.Text;//cbAcupoint 是Combox控件的名称
                if (!string.IsNullOrEmpty(txt))
                {
                    List<string> res = listAcupoint.FindAll(ComparisionConditionAcupoint);//数据源的查找,listAcupoint中存放的是窗体加载时的数据
                    cbAcupoint.AutoCompleteCustomSource.AddRange(res.ToArray());
                }
            }</span>

        上面的代码中,listAcupoint是窗体加载时获得的下拉列表的数据源,是一个List<string>的集合。FindAll()方法,获得满足条件的所有数据项,里面要传递一个委托函数,用来设置比较的条件,委托的原型可以通过F12来进行查看。得到所有满足条件的数据后,转换成数组赋值给AutoCompleteCustomSource即可。
    委托函数如下:
    <span style="font-size:18px;">//比较条件
            public bool ComparisionConditionAcupoint (string s)
            {
                Regex reg = new Regex("^" + cbAcupoint.Text + ".");
                bool b = reg.IsMatch(s);
                return b;
            }</span>
        集合listAcupoint的FindAll()方法在进行查找的时候将listAcupoint中每一个项传递到上面这个委托函数中,用一个参数s来接收,如果满足条件,返回一个true,这个s就会成为查找的结果中的一项,如果返回false就代表当前项不合格

    通过上面两段代码和属性的设置就能够实现我们想要的效果,实际项目中做的是一个穴位和病症的例子,效果如下:





  • 相关阅读:
    LeetCode153 Find Minimum in Rotated Sorted Array. LeetCode162 Find Peak Element
    LeetCode208 Implement Trie (Prefix Tree). LeetCode211 Add and Search Word
    LeetCode172 Factorial Trailing Zeroes. LeetCode258 Add Digits. LeetCode268 Missing Number
    LeetCode191 Number of 1 Bits. LeetCode231 Power of Two. LeetCode342 Power of Four
    LeetCode225 Implement Stack using Queues
    LeetCode150 Evaluate Reverse Polish Notation
    LeetCode125 Valid Palindrome
    LeetCode128 Longest Consecutive Sequence
    LeetCode124 Binary Tree Maximum Path Sum
    LeetCode123 Best Time to Buy and Sell Stock III
  • 原文地址:https://www.cnblogs.com/qigang/p/3841936.html
Copyright © 2011-2022 走看看