使用h5标签—— datalist

原创已于 2023-05-26 19:04:12 修改 · 326 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html

于 2023-05-23 17:58:30 首次发布

文章展示了如何利用JavaScript和HTML的datalist元素创建一个输入框自动完成的功能。当用户在输入框中输入时，程序会监听输入事件，并根据预定义的选项列表动态生成下拉建议。此功能涉及compositionstart和compositionend事件来处理中文输入，并在用户输入非空内容时更新下拉列表。

datalist案例地址：https://www.runoob.com/try/try.php?filename=tryjsref_datalist_options

标签被用来在为元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据

在这里插入图片描述

let input = document.getElementById('searchName');
   let input2 = document.getElementById('searchName2');
   let input3 = document.getElementById('searchName3');
   watchIpt(input,(v)=>{
      if(v.trim().length === 0){
       $('#browsers').html('');
      }else{
           searchIpt(v)
      }
   })

   function watchIpt(elem,callback){
       let notChinese = true;
       elem.addEventListener('compositionstart',(e)=>{
           console.log('start');
           notChinese = false;
       })

       elem.addEventListener('compositionend',(e)=>{
           console.log('end');
           notChinese = true;
       })
       
       elem.addEventListener('input',(e)=>{
           setTimeout(()=>{
               if(notChinese){
                   callback(e.target.value)
               }
           })
       })

   }


   function searchIpt(iptVal){
       const list  = [
           {
               name:'苹果1'
           },
           {
               name:'苹果2'
           },
           {
               name:'梨树'
           },
           {
               name:'苹果苹果苹果苹果苹果树'
           },
           {
               name:'苹果1'
           },
           {
               name:'苹果2'
           },
           {
               name:'梨树'
           },
           {
               name:'苹果苹果苹果苹果苹果树'
           },
           {
               name:'苹果1'
           },
           {
               name:'苹果2'
           },
           {
               name:'梨树'
           },
           {
               name:'苹果苹果苹果苹果苹果树'
           },
           {
               name:'苹果1'
           },
           {
               name:'苹果2'
           },
           {
               name:'梨树'
           },
           {
               name:'苹果苹果苹果苹果苹果树'
           },
           {
               name:'苹果1'
           },
           {
               name:'苹果2'
           },
           {
               name:'梨树'
           },
           {
               name:'苹果苹果苹果苹果苹果树'
           },
           {
               name:'苹果1'
           },
           {
               name:'苹果2'
           },
           {
               name:'梨树'
           },
           {
               name:'苹果苹果苹果苹果苹果树'
           },
           {
               name:'苹果1'
           },
           {
               name:'苹果2'
           },
           {
               name:'梨树'
           },
           {
               name:'苹果苹果苹果苹果苹果树'
           },
           {
               name:'葡萄树'
           },
       ];

       $('#browsers').html('');
       let optEle = ''
       list.forEach(item =>{
           optEle += `<option value="${item.name}">`
       })

       $('#browsers').append(optEle);
   }