文章目录
  1. 1. 简介
  2. 2. 使用
  3. 3. 例子
    1. 3.1. 简单使用
    2. 3.2. focusIn/focusOut
    3. 3.3. isNeedCaret
    4. 3.4. isNeedSpell/spellKey/simpleSpellKey
    5. 3.5. props
    6. 3.6. isSetSelectionRange
    7. 3.7. isOptionChoiced
    8. 3.8. choicedType
    9. 3.9. optionChoicedClass
    10. 3.10. isOpenRemove/removeBoxClass/removeClass
    11. 3.11. isEnter/isEnterCongruent
    12. 3.12. optionBoxEmpty
    13. 3.13. changeSelected

简介

fxss-autoSelectSearch是一款jquery插件,支持中文/全拼/简拼等多种搜索方式的搜索插件,还支持清空搜索列表、强制指定某个搜索框选择某项option。

使用

首先必须引入jQuery文件、fxss-autoSelectSearch.js核心文件 以及 fxss-autoSelectSearch.css样式文件。

1
2
3
<link rel="stylesheet" href="http://www.fxss5201.cn/project/plugin/autoSelectSearch/fxss-autoSelectSearch.css">
<script src="http://www.fxss5201.cn/project/js/jquery-1.11.3.js"></script>
<script src="http://www.fxss5201.cn/project/plugin/autoSelectSearch/fxss-autoSelectSearch.js"></script>

在html中需要有如下格式:

1
2
3
4
5
<div class="autoSelectSearch-box js-autoSelectSearch-box">
<input class="autoSelectSearch-input js-autoSelectSearch-input" type="text" id="test1" autocomplete="off">
<ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
<i class="autoSelectSearch-caret js-autoSelectSearch-caret"></i>
</div>
  • 外层的div是包裹整个插件的DOM
  • input框就是输入搜索的地方,input设置autocomplete为off,自定义属性data-optionChoiced可以设置当前选中项,当然你也可以直接为其设置value来表示选中项并且当value设置的时候,data-optionChoiced设置无效且会被更新,
  • ul则是符合条件的下拉列表
  • i标签是右边的表示下拉的图标(可以设置isNeedCaret是否需要显示)。

如果你觉得样式不合你的口味,可以直接修改fxss-autoSelectSearch.css的样式文件。

在js文件中可以按照如下写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$("#test1").autoSelectSearch({
dataList: data,
isNeedCaret: true,
key: "userName",
isNeedSpell: true,
props: {
label: "Cellphone",
text: "userName",
spell: "spell",
simpleSpell: "simpleSpell"
},
isOptionChoiced: true,
choicedType: "Cellphone",
isOpenRemove: false,
isEnter: true,
optionClickFun: function (obj) {
console.log(obj)
console.log(obj.targetInput.attr("class"))
}
});

上面是整个插件的引用,点击下拉列表中的选项之后回调optionClickFun函数会以参数将当前选中项的数据传出。

清空搜索列表用法如下:

1
$("#test1").optionBoxEmpty();

强制指定某个搜索框选择某项option:

1
2
3
$("#test1").changeSelected({
choiced: "11122223333"
});

例子

以下所有例子使用的dataList均为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
var data = [{
"userName": "鸣人",
"spell": "mingren",
"simpleSpell": "MR",
"Cellphone": "11122223333"
}, {
"userName": "佐助",
"spell": "zuozhu",
"simpleSpell": "ZZ",
"Cellphone": "12111112222"
}, {
"userName": "春野樱",
"spell": "chunyeying",
"simpleSpell": "CYY",
"Cellphone": "12311112222"
}, {
"userName": "卡卡西",
"spell": "kakaxi",
"simpleSpell": "kkx",
"Cellphone": "21211112222"
}, {
"userName": "李洛克",
"spell": "liluoke",
"simpleSpell": "LLK",
"Cellphone": "32122223333"
}, {
"userName": "自来也",
"spell": "zilaiye",
"simpleSpell": "ZLY",
"Cellphone": "23123234343"
}, {
"userName": "我爱罗",
"spell": "woailuo",
"simpleSpell": "woailuo",
"Cellphone": "21312121212"
}, {
"userName": "大蛇丸",
"spell": "dashewan",
"simpleSpell": "DSW",
"Cellphone": "32132324321"
}, {
"userName": "纲手",
"spell": "gangshou",
"simpleSpell": "GS",
"Cellphone": "12000002121"
}, {
"userName": "宇智波鼬",
"spell": "yuzhiboyou",
"simpleSpell": "YZBY",
"Cellphone": "10012123232"
}, {
"userName": "柱间",
"spell": "zhujian",
"simpleSpell": "ZJ",
"Cellphone": "10011112222"
}, {
"userName": "宇智波斑",
"spell": "yuzhiboban",
"simpleSpell": "YZBB",
"Cellphone": "10013232312"
}];

简单使用

    1
    2
    3
    4
    5
    <div class="autoSelectSearch-box js-autoSelectSearch-box">
    <input class="autoSelectSearch-input js-autoSelectSearch-input" type="text" id="test1" autocomplete="off">
    <ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
    <i class="autoSelectSearch-caret js-autoSelectSearch-caret"></i>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    $("#test1").autoSelectSearch({
    dataList: data,
    isNeedCaret: true,
    key: "userName",
    isNeedSpell: true,
    props: {
    label: "Cellphone",
    text: "userName",
    spell: "spell",
    simpleSpell: "simpleSpell"
    },
    choicedType: "Cellphone",
    optionClickFun: function (obj) {
    console.log(obj)
    }
    });

    focusIn/focusOut

    设置input获得焦点和失去焦点时的样式类名。

    1. focusIn:input获得焦点时添加的样式类名
    2. focusOut:input失去焦点时删除的样式类名
      1
      2
      3
      4
      5
      6
      .input-focuse-in {
      color: #f00;
      }
      .input-focuse-out {
      color: #0f0;
      }
      1
      2
      3
      4
      5
      <div class="autoSelectSearch-box js-autoSelectSearch-box">
      <input class="autoSelectSearch-input js-autoSelectSearch-input" type="text" id="test2" autocomplete="off">
      <ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
      <i class="autoSelectSearch-caret js-autoSelectSearch-caret"></i>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      $("#test2").autoSelectSearch({
      dataList: data,
      isNeedCaret: true,
      key: "userName",
      focusIn: "input-focuse-in",
      focusOut: "input-focuse-out",
      isNeedSpell: true,
      props: {
      label: "Cellphone",
      text: "userName",
      spell: "spell",
      simpleSpell: "simpleSpell"
      },
      choicedType: "Cellphone",
      optionClickFun: function (obj) {
      console.log(obj)
      }
      });

      isNeedCaret

      设置是否需要下拉图标。

      1. isNeedCaret:true需要,false不需要,默认值为false。
        1
        2
        3
        4
        5
        <div class="autoSelectSearch-box js-autoSelectSearch-box">
        <input class="autoSelectSearch-input js-autoSelectSearch-input" type="text" id="test3" autocomplete="off">
        <ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
        <i class="autoSelectSearch-caret js-autoSelectSearch-caret"></i>
        </div>
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        $("#test3").autoSelectSearch({
        dataList: data,
        isNeedCaret: false, //也可以直接将此删除
        key: "userName",
        isNeedSpell: true,
        props: {
        label: "Cellphone",
        text: "userName",
        spell: "spell",
        simpleSpell: "simpleSpell"
        },
        choicedType: "Cellphone",
        optionClickFun: function (obj) {
        console.log(obj)
        }
        });

        isNeedSpell/spellKey/simpleSpellKey

        设置是否需要支持拼音搜索。

        1. isNeedSpell:true表示需要,false不需要,默认值为false。
        2. spellKey:指定拼音全拼的key
        3. simpleSpellKey:指定拼音简拼的key
          1
          2
          3
          4
          5
          <div class="autoSelectSearch-box js-autoSelectSearch-box">
          <input class="autoSelectSearch-input js-autoSelectSearch-input" type="text" id="test4" autocomplete="off">
          <ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
          <i class="autoSelectSearch-caret js-autoSelectSearch-caret"></i>
          </div>
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          $("#test4").autoSelectSearch({
          dataList: data,
          isNeedCaret: true,
          key: "userName",
          isNeedSpell: false,
          props: {
          label: "Cellphone",
          text: "userName",
          spell: "spell", // spell和simpleSpell就可以删除掉了,放在这里也无用了
          simpleSpell: "simpleSpell"
          },
          choicedType: "Cellphone",
          optionClickFun: function (obj) {
          console.log(obj)
          }
          });

          props

          渲染下拉列表的依据,最多可以指定四个key值,label、text、spell、simpleSpell,所有指定的值都会以自定义属性渲染到相应的option即li上面,option的内容是以text渲染的。默认值为{ label: “attr”,text: “name” }。

            1
            2
            3
            4
            5
            <div class="autoSelectSearch-box js-autoSelectSearch-box">
            <input class="autoSelectSearch-input js-autoSelectSearch-input" type="text" id="test5" autocomplete="off">
            <ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
            <i class="autoSelectSearch-caret js-autoSelectSearch-caret"></i>
            </div>
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
            15
            16
            17
            18
            19
            20
            21
            22
            23
            24
            25
            26
            27
            28
            29
            30
            31
            32
            var newData = [{
            "name": "鸣人",
            "spell": "mingren",
            "simpleSpell": "MR",
            "phone": "11122223333"
            }, {
            "name": "佐助",
            "spell": "zuozhu",
            "simpleSpell": "ZZ",
            "phone": "12111112222"
            }, {
            "name": "春野樱",
            "spell": "chunyeying",
            "simpleSpell": "CYY",
            "phone": "12311112222"
            }];
            $("#test5").autoSelectSearch({
            dataList: newData,
            isNeedCaret: true,
            key: "name",
            isNeedSpell: true,
            props: {
            label: "phone",
            text: "name",
            spell: "spell",
            simpleSpell: "simpleSpell"
            },
            choicedType: "phone",
            optionClickFun: function (obj) {
            console.log(obj)
            }
            });

            isSetSelectionRange

            是否需要在input选中的时候,直接选中value值。

            1. isSetSelectionRange:默认为选中(true),如不想选中,可设置为false。
              1
              2
              3
              4
              5
              <div class="autoSelectSearch-box js-autoSelectSearch-box">
              <input class="autoSelectSearch-input js-autoSelectSearch-input" type="text" id="test6" autocomplete="off">
              <ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
              <i class="autoSelectSearch-caret js-autoSelectSearch-caret"></i>
              </div>
              1
              2
              3
              4
              5
              6
              7
              8
              9
              10
              11
              12
              13
              14
              15
              16
              17
              $("#test6").autoSelectSearch({
              dataList: data,
              isNeedCaret: true,
              key: "userName",
              isNeedSpell: true,
              props: {
              label: "Cellphone",
              text: "userName",
              spell: "spell",
              simpleSpell: "simpleSpell"
              },
              isSetSelectionRange: false,
              choicedType: "Cellphone",
              optionClickFun: function (obj) {
              console.log(obj)
              }
              });

              isOptionChoiced

              是否需要设定旧的选项值,如果需要(true),则需要设置data-optionchoiced自定义属性,将会把选中值设置到此自定义属性,并且当将input删除为空的时候,input失去焦点的时候,也会将此自定义属性的值设置为value.

                1
                2
                3
                4
                5
                <div class="autoSelectSearch-box js-autoSelectSearch-box">
                <input class="autoSelectSearch-input js-autoSelectSearch-input" type="text" id="test7" autocomplete="off">
                <ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
                <i class="autoSelectSearch-caret js-autoSelectSearch-caret"></i>
                </div>
                1
                2
                3
                4
                5
                6
                7
                8
                9
                10
                11
                12
                13
                14
                15
                16
                17
                $("#test7").autoSelectSearch({
                dataList: data,
                isNeedCaret: true,
                key: "userName",
                isNeedSpell: true,
                props: {
                label: "Cellphone",
                text: "userName",
                spell: "spell",
                simpleSpell: "simpleSpell"
                },
                isOptionChoiced: false,
                choicedType: "Cellphone",
                optionClickFun: function (obj) {
                console.log(obj)
                }
                });

                choicedType

                选中值的参数类型,也就是选中值是在元数据类型中的key值,可以指定props中的key值。

                指定choicedType为Cellphone,在input上指定data-optionChoiced自定义属性为12111112222:

                  1
                  2
                  3
                  4
                  5
                  <div class="autoSelectSearch-box js-autoSelectSearch-box">
                  <input class="autoSelectSearch-input js-autoSelectSearch-input" type="text" id="test8" autocomplete="off" data-optionChoiced="12111112222">
                  <ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
                  <i class="autoSelectSearch-caret js-autoSelectSearch-caret"></i>
                  </div>
                  1
                  2
                  3
                  4
                  5
                  6
                  7
                  8
                  9
                  10
                  11
                  12
                  13
                  14
                  15
                  16
                  17
                  $("#test8").autoSelectSearch({
                  dataList: data,
                  isNeedCaret: true,
                  key: "userName",
                  isNeedSpell: true,
                  props: {
                  label: "Cellphone",
                  text: "userName",
                  spell: "spell",
                  simpleSpell: "simpleSpell"
                  },
                  isOptionChoiced: false,
                  choicedType: "Cellphone",
                  optionClickFun: function (obj) {
                  console.log(obj)
                  }
                  });

                  指定choicedType为userName,在input上指定data-optionChoiced自定义属性为卡卡西:

                    1
                    2
                    3
                    4
                    5
                    <div class="autoSelectSearch-box js-autoSelectSearch-box">
                    <input class="autoSelectSearch-input js-autoSelectSearch-input" type="text" id="test9" autocomplete="off" data-optionChoiced="卡卡西">
                    <ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
                    <i class="autoSelectSearch-caret js-autoSelectSearch-caret"></i>
                    </div>
                    1
                    2
                    3
                    4
                    5
                    6
                    7
                    8
                    9
                    10
                    11
                    12
                    13
                    14
                    15
                    16
                    17
                    $("#test9").autoSelectSearch({
                    dataList: data,
                    isNeedCaret: true,
                    key: "userName",
                    isNeedSpell: true,
                    props: {
                    label: "Cellphone",
                    text: "userName",
                    spell: "spell",
                    simpleSpell: "simpleSpell"
                    },
                    isOptionChoiced: false,
                    choicedType: "userName",
                    optionClickFun: function (obj) {
                    console.log(obj)
                    }
                    });

                    当同时指定value值和data-optionChoiced的时候,以value为准。

                    1. value不会进行choicedType匹配;
                      • 当此时的value值符合原数据的text时,下拉列表会相应选中,并直接将data-optionChoiced更新为value此时的值;
                      • 当此时的value值不符合原数据的text时,下拉列表无选中项,不会更新data-optionChoiced的值,而且当将value删除之后,会再次将data-optionChoiced的值设置为选中值。
                    2. data-optionChoiced会进行choicedType匹配以得到相应的text。

                    指定choicedType为userName,在input上指定data-optionChoiced自定义属性为卡卡西,value指定为鸣人:

                      1
                      2
                      3
                      4
                      5
                      <div class="autoSelectSearch-box js-autoSelectSearch-box">
                      <input class="autoSelectSearch-input js-autoSelectSearch-input" type="text" id="test10" value="鸣人" autocomplete="off" data-optionChoiced="卡卡西">
                      <ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
                      <i class="autoSelectSearch-caret js-autoSelectSearch-caret"></i>
                      </div>
                      1
                      2
                      3
                      4
                      5
                      6
                      7
                      8
                      9
                      10
                      11
                      12
                      13
                      14
                      15
                      16
                      17
                      $("#test10").autoSelectSearch({
                      dataList: data,
                      isNeedCaret: true,
                      key: "userName",
                      isNeedSpell: true,
                      props: {
                      label: "Cellphone",
                      text: "userName",
                      spell: "spell",
                      simpleSpell: "simpleSpell"
                      },
                      isOptionChoiced: false,
                      choicedType: "userName",
                      optionClickFun: function (obj) {
                      console.log(obj)
                      }
                      });

                      指定choicedType为userName,在input上指定data-optionChoiced自定义属性为卡卡西,value指定为带土:

                        1
                        2
                        3
                        4
                        5
                        <div class="autoSelectSearch-box js-autoSelectSearch-box">
                        <input class="autoSelectSearch-input js-autoSelectSearch-input" type="text" id="test11" value="带土" autocomplete="off" data-optionChoiced="卡卡西">
                        <ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
                        <i class="autoSelectSearch-caret js-autoSelectSearch-caret"></i>
                        </div>
                        1
                        2
                        3
                        4
                        5
                        6
                        7
                        8
                        9
                        10
                        11
                        12
                        13
                        14
                        15
                        16
                        17
                        $("#test11").autoSelectSearch({
                        dataList: data,
                        isNeedCaret: true,
                        key: "userName",
                        isNeedSpell: true,
                        props: {
                        label: "Cellphone",
                        text: "userName",
                        spell: "spell",
                        simpleSpell: "simpleSpell"
                        },
                        isOptionChoiced: false,
                        choicedType: "userName",
                        optionClickFun: function (obj) {
                        console.log(obj)
                        }
                        });

                        optionChoicedClass

                        selectSearchOption选中时的样式类名,默认为”js-option-choiced”

                          1
                          2
                          3
                          .custom-option-choiced {
                          color: #f00;
                          }
                          1
                          2
                          3
                          4
                          5
                          <div class="autoSelectSearch-box js-autoSelectSearch-box">
                          <input class="autoSelectSearch-input js-autoSelectSearch-input" type="text" id="test12" value="卡卡西" autocomplete="off">
                          <ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
                          <i class="autoSelectSearch-caret js-autoSelectSearch-caret"></i>
                          </div>
                          1
                          2
                          3
                          4
                          5
                          6
                          7
                          8
                          9
                          10
                          11
                          12
                          13
                          14
                          15
                          16
                          17
                          $("#test12").autoSelectSearch({
                          dataList: data,
                          isNeedCaret: true,
                          key: "userName",
                          isNeedSpell: true,
                          props: {
                          label: "Cellphone",
                          text: "userName",
                          spell: "spell",
                          simpleSpell: "simpleSpell"
                          },
                          choicedType: "Cellphone",
                          optionChoicedClass: "custom-option-choiced",
                          optionClickFun: function (obj) {
                          console.log(obj)
                          }
                          });

                          isOpenRemove/removeBoxClass/removeClass

                          1. isOpenRemove:是否开启去重处理,默认false不开启,true开启则必须设置去重处理的class类名,去重处理主要是按照props里面的text来去重
                          2. removeBoxClass:去重处理的容器的class类名(如”.class”)或id名(如”#id”),默认值为空
                          3. removeClass:去重处理的class类名,默认值为”js-autoSelectSearch-remove”

                          设置removeBoxClass则只去除此后代元素。

                          • 自来也
                          • 大蛇丸
                            1
                            2
                            3
                            4
                            5
                            6
                            7
                            8
                            9
                            <ul id="removeBox">
                            <li class="js-autoSelectSearch-remove">自来也</li>
                            <li class="js-autoSelectSearch-remove">大蛇丸</li>
                            </ul>
                            <div class="autoSelectSearch-box js-autoSelectSearch-box">
                            <input class="autoSelectSearch-input js-autoSelectSearch-input" type="text" id="test13" autocomplete="off">
                            <ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
                            <i class="autoSelectSearch-caret js-autoSelectSearch-caret"></i>
                            </div>
                            1
                            2
                            3
                            4
                            5
                            6
                            7
                            8
                            9
                            10
                            11
                            12
                            13
                            14
                            15
                            16
                            17
                            18
                            $("#test13").autoSelectSearch({
                            dataList: data,
                            isNeedCaret: true,
                            key: "userName",
                            isNeedSpell: true,
                            props: {
                            label: "Cellphone",
                            text: "userName",
                            spell: "spell",
                            simpleSpell: "simpleSpell"
                            },
                            choicedType: "Cellphone",
                            isOpenRemove: true,
                            removeBoxClass: "#removeBox",
                            optionClickFun: function (obj) {
                            console.log(obj)
                            }
                            });

                            未设置removeBoxClass,则也会去除上述中的自来也和大蛇丸。

                            • 纲手
                            • 鸣人
                              1
                              2
                              3
                              4
                              5
                              6
                              7
                              8
                              9
                              <ul>
                              <li class="js-autoSelectSearch-remove">纲手</li>
                              <li class="js-autoSelectSearch-remove">鸣人</li>
                              </ul>
                              <div class="autoSelectSearch-box js-autoSelectSearch-box">
                              <input class="autoSelectSearch-input js-autoSelectSearch-input" type="text" id="test14" autocomplete="off">
                              <ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
                              <i class="autoSelectSearch-caret js-autoSelectSearch-caret"></i>
                              </div>
                              1
                              2
                              3
                              4
                              5
                              6
                              7
                              8
                              9
                              10
                              11
                              12
                              13
                              14
                              15
                              16
                              17
                              $("#test14").autoSelectSearch({
                              dataList: data,
                              isNeedCaret: true,
                              key: "userName",
                              isNeedSpell: true,
                              props: {
                              label: "Cellphone",
                              text: "userName",
                              spell: "spell",
                              simpleSpell: "simpleSpell"
                              },
                              choicedType: "Cellphone",
                              isOpenRemove: true,
                              optionClickFun: function (obj) {
                              console.log(obj)
                              }
                              });

                              自定义removeClass未custom-remove:

                              • 自来也
                              • 大蛇丸
                              • 纲手
                                1
                                2
                                3
                                4
                                5
                                6
                                7
                                8
                                9
                                10
                                <ul>
                                <li class="custom-remove">自来也</li>
                                <li class="custom-remove">大蛇丸</li>
                                <li class="custom-remove">纲手</li>
                                </ul>
                                <div class="autoSelectSearch-box js-autoSelectSearch-box">
                                <input class="autoSelectSearch-input js-autoSelectSearch-input" type="text" id="test15" autocomplete="off">
                                <ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
                                <i class="autoSelectSearch-caret js-autoSelectSearch-caret"></i>
                                </div>
                                1
                                2
                                3
                                4
                                5
                                6
                                7
                                8
                                9
                                10
                                11
                                12
                                13
                                14
                                15
                                16
                                17
                                18
                                $("#test15").autoSelectSearch({
                                dataList: data,
                                isNeedCaret: true,
                                key: "userName",
                                isNeedSpell: true,
                                props: {
                                label: "Cellphone",
                                text: "userName",
                                spell: "spell",
                                simpleSpell: "simpleSpell"
                                },
                                choicedType: "Cellphone",
                                isOpenRemove: true,
                                removeClass: "custom-remove",
                                optionClickFun: function (obj) {
                                console.log(obj)
                                }
                                });

                                isEnter/isEnterCongruent

                                1. isEnter:是否开启在input中的回车事件,点击回车默认选中第一个
                                2. isEnterCongruent:开启在input中的回车事件,回车的时候内容是否要和列表中的内容匹配(此处指的匹配仅仅是将第一个option的值与dataList相对label、text、spell、simpleSpell对应的值的值进行比较),true匹配,false匹不匹配都可以

                                设置isEnter: true

                                  1
                                  2
                                  3
                                  4
                                  5
                                  <div class="autoSelectSearch-box js-autoSelectSearch-box">
                                  <input class="autoSelectSearch-input js-autoSelectSearch-input" type="text" id="test16" autocomplete="off">
                                  <ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
                                  <i class="autoSelectSearch-caret js-autoSelectSearch-caret"></i>
                                  </div>
                                  1
                                  2
                                  3
                                  4
                                  5
                                  6
                                  7
                                  8
                                  9
                                  10
                                  11
                                  12
                                  13
                                  14
                                  15
                                  16
                                  17
                                  $("#test16").autoSelectSearch({
                                  dataList: data,
                                  isNeedCaret: true,
                                  key: "userName",
                                  isNeedSpell: true,
                                  props: {
                                  label: "Cellphone",
                                  text: "userName",
                                  spell: "spell",
                                  simpleSpell: "simpleSpell"
                                  },
                                  choicedType: "Cellphone",
                                  isEnter: true,
                                  optionClickFun: function (obj) {
                                  console.log(obj)
                                  }
                                  });

                                  设置isEnter: true以及isEnterCongruent: true,则此时必须严格匹配才可以

                                    1
                                    2
                                    3
                                    4
                                    5
                                    <div class="autoSelectSearch-box js-autoSelectSearch-box">
                                    <input class="autoSelectSearch-input js-autoSelectSearch-input" type="text" id="test17" autocomplete="off">
                                    <ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
                                    <i class="autoSelectSearch-caret js-autoSelectSearch-caret"></i>
                                    </div>
                                    1
                                    2
                                    3
                                    4
                                    5
                                    6
                                    7
                                    8
                                    9
                                    10
                                    11
                                    12
                                    13
                                    14
                                    15
                                    16
                                    17
                                    18
                                    $("#test17").autoSelectSearch({
                                    dataList: data,
                                    isNeedCaret: true,
                                    key: "userName",
                                    isNeedSpell: true,
                                    props: {
                                    label: "Cellphone",
                                    text: "userName",
                                    spell: "spell",
                                    simpleSpell: "simpleSpell"
                                    },
                                    choicedType: "Cellphone",
                                    isEnter: true,
                                    isEnterCongruent: true,
                                    optionClickFun: function (obj) {
                                    console.log(obj)
                                    }
                                    });

                                    optionBoxEmpty

                                    参数offEvent,是否要清除input绑定的事件,清除之后提示搜索功能将不再支持,默认值是false,仅做置空处理。由于此插件是在获取焦点的时候才会过滤渲染下拉列表,所以当无参数置空之后,input再次获取焦点依然会有下拉列表。

                                      1
                                      2
                                      3
                                      4
                                      5
                                      6
                                      <div class="autoSelectSearch-box js-autoSelectSearch-box">
                                      <input class="autoSelectSearch-input js-autoSelectSearch-input" type="text" id="test18" autocomplete="off">
                                      <ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
                                      <i class="autoSelectSearch-caret js-autoSelectSearch-caret"></i>
                                      </div>
                                      <button id="empty" style="height:38px">清空下拉列表和事件</button>
                                      1
                                      2
                                      3
                                      4
                                      5
                                      6
                                      7
                                      8
                                      9
                                      10
                                      11
                                      12
                                      13
                                      14
                                      15
                                      16
                                      17
                                      18
                                      19
                                      $("#test18").autoSelectSearch({
                                      dataList: data,
                                      isNeedCaret: true,
                                      key: "userName",
                                      isNeedSpell: true,
                                      props: {
                                      label: "Cellphone",
                                      text: "userName",
                                      spell: "spell",
                                      simpleSpell: "simpleSpell"
                                      },
                                      choicedType: "Cellphone",
                                      optionClickFun: function (obj) {
                                      console.log(obj)
                                      }
                                      });
                                      $("#empty").on("click", function(){
                                      $("#test18").optionBoxEmpty(true);
                                      });

                                      changeSelected

                                      指定选中项的值,请以对象的形式指定{ choiced: “” },请确保如果指定了choicedType值,在指定值得时候请指定相应的内容。

                                      设置鸣人为选中项,由于设置choicedType为Cellphone,所以changeSelected的参数指定为{choiced: “11122223333”},”11122223333”为鸣人的Cellphone。

                                        1
                                        2
                                        3
                                        4
                                        5
                                        6
                                        <div class="autoSelectSearch-box js-autoSelectSearch-box">
                                        <input class="autoSelectSearch-input js-autoSelectSearch-input" type="text" id="test19" autocomplete="off">
                                        <ul class="autoSelectSearch-optionBox js-autoSelectSearch-optionBox"></ul>
                                        <i class="autoSelectSearch-caret js-autoSelectSearch-caret"></i>
                                        </div>
                                        <button id="change" style="height:38px">设置鸣人为选中项</button>
                                        1
                                        2
                                        3
                                        4
                                        5
                                        6
                                        7
                                        8
                                        9
                                        10
                                        11
                                        12
                                        13
                                        14
                                        15
                                        16
                                        17
                                        18
                                        19
                                        $("#test19").autoSelectSearch({
                                        dataList: data,
                                        isNeedCaret: true,
                                        key: "userName",
                                        isNeedSpell: true,
                                        props: {
                                        label: "Cellphone",
                                        text: "userName",
                                        spell: "spell",
                                        simpleSpell: "simpleSpell"
                                        },
                                        choicedType: "Cellphone",
                                        optionClickFun: function (obj) {
                                        console.log(obj)
                                        }
                                        });
                                        $("#change").on("click", function(){
                                        $("#test19").changeSelected({choiced: "11122223333"});
                                        });

                                        如果使用中有什么问题,可以联系我,或者有什么建议都可以提出。

                                        文章目录
                                        1. 1. 简介
                                        2. 2. 使用
                                        3. 3. 例子
                                          1. 3.1. 简单使用
                                          2. 3.2. focusIn/focusOut
                                          3. 3.3. isNeedCaret
                                          4. 3.4. isNeedSpell/spellKey/simpleSpellKey
                                          5. 3.5. props
                                          6. 3.6. isSetSelectionRange
                                          7. 3.7. isOptionChoiced
                                          8. 3.8. choicedType
                                          9. 3.9. optionChoicedClass
                                          10. 3.10. isOpenRemove/removeBoxClass/removeClass
                                          11. 3.11. isEnter/isEnterCongruent
                                          12. 3.12. optionBoxEmpty
                                          13. 3.13. changeSelected