小露一手:按拼音检索下拉框选项

版权所有:这是我的原创,转载请尊重我的劳动成果,注明出处,谢谢!

测试页面:

<!--
  @author: 熊水林(xionglb@163.com)
  @lastModified: 2006-7-19
  @descript: 按拼音检索下拉框选项
-->
 <script language=javascript src="拼音检索.js"></script>
<body οnlοad="initSelect(myselect)">
 <input name="shengmu" οnkeydοwn="return toUpperText(this)">(声母)
 <input type="button" value="查找" οnclick="findByCapital(shengmu,myselect)"><BR>
 <select name="myselect" οnkeydοwn="quickSelect(this)">
   <option value="">人猿泰山
   <option value="">中南海保镖
   <option value="">神话
   <option value="">战警
   <option value="">大话西游
   <option value="">喜剧之王
   <option value="">母亲
   <option value="">倚天屠龙记
   <option value="">南北少林
   <option value="">霸王别姬
   <option value="">精武英雄
   <option value="">龙在天涯
 </select>(第一个字)
</body>

以下是“拼音检索.js”

/*
  @author: 熊水林(xionglb@163.com)
  @lastModified: 2006-7-19
  @descript: 按拼音检索下拉框选项
 */
 document.write('<script language=javascript src="../GBHZ2PY.js"></script>');
 var piny = new Array();
 var capital = new Array();
 function initSelect(combox){
    var firstHZ = "";
    var len = combox.length;
    for (var i=0; i<len; i++){
        firstHZ += combox.options[i].text.charAt(0);
    }
    firstHZ = firstHZ.split("").sort(pinyinSort);
    for (var i=0; i<firstHZ.length; i++){  //重新排列下拉框并转换首个汉字
       for (var j=0; j<len; j++){
           var optionObj = combox.options[j];
           if (firstHZ[i] == optionObj.text.charAt(0)){
              combox.add(new Option(optionObj.text,optionObj.value));
              combox.remove(j);
              len --;
           }
       }
       piny.push(pinyin(firstHZ[i]).toUpperCase());
    }
    for (var i=0; i<combox.length; i++){  //每个字的首个声母
        var text = combox[i].text;
        var shengmu = "";
        for (var j=0; j<text.length; j++){
           shengmu += pinyin(text.charAt(j)).toUpperCase().charAt(0);
        }
        capital.push(shengmu);
    }
 }
 function quickSelect(combox){
   var ch = String.fromCharCode(event.keyCode);
   for (var i=0; i<piny.length; i++){
      if (piny[i].substring(0,1)==ch){
         combox.selectedIndex = i;
         break;
      }
   }
 }
 function findByCapital(textObj,combox){
    var shengmu = textObj.value;
    var index = -1;
    while (shengmu.length>0 && index==-1){
       for (var i=0; i<combox.length; i++){
           if (capital[i].indexOf(shengmu) == 0){
              combox.selectedIndex = i;
              index = i;
              break;
           }
       }
       shengmu = shengmu.substring(0, shengmu.length-1);
    }
    if (index == -1){
       alert("未找到");
    }
 }
 //输入大写字母
 function toUpperText(textObj){
    if (event.keyCode>=65 && event.keyCode<=90){
       textObj.value += String.fromCharCode(event.keyCode);
       return false;
    }
    return true;
 } 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
在Vue 3和Quasar中创建一个可输入且可多选的检索下拉框,你可以使用Quasar的QSelect组件。QSelect组件提供了可输入的搜索功能,并且支持多选。 下面是一个示例代码,展示了如何在Vue 3 + Quasar中创建一个可输入且可多选的检索下拉框: ```vue <template> <div> <q-select v-model="selectedItems" :options="items" option-label="label" option-value="value" :filter="filterItems" :multiple="true" :hide-selected="true" :max-values="3" input-debounce="300" placeholder="Search" /> </div> </template> <script> export default { data() { return { selectedItems: [], items: [ { label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }, { label: 'Option 3', value: 'option3' }, // 其他选项... ] }; }, methods: { filterItems(val, update) { if (val === '') { update(() => { this.selectedItems = []; }); return; } const lowercaseVal = val.toLowerCase(); const filteredItems = this.items.filter(item => item.label.toLowerCase().includes(lowercaseVal) ); update(() => { this.items = filteredItems; }); } } }; </script> ``` 在上面的代码中,我们使用了Quasar的`q-select`组件来创建可输入且可多选的检索下拉框。通过`v-model`指令,我们将选中的项绑定到`selectedItems`数组上。 在`options`属性中,我们提供了下拉框选项。每个选项都包含`label`和`value`属性。 通过`filter`属性,我们指定了一个过滤方法`filterItems`。这个方法根据输入的内容对选项进行筛选,并更新下拉框选项。 在`filterItems`方法中,我们首先处理空字符串的情况,当输入为空时,将重置选中的项和下拉框选项。 然后,我们将输入的内容转换为小写,并根据输入的内容对选项进行筛选,并更新下拉框选项。 通过设置`multiple`属性为`true`,我们允许多选。通过设置`hide-selected`属性为`true`,我们隐藏已选中的选项。通过设置`max-values`属性,我们限制最多选择的项数。 通过这种方式,我们实现了一个可输入且可多选的检索下拉框。 希望这个示例对你有所帮助!如果还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值