wch_1982
wch_1982
采纳率100%
2017-07-11 02:55

html5 datalist 选中option选项后的触发事件

已采纳

使用input + datalist 实现自动补全功能,其中datalist中的内容是根据input输入的内容动态变换的,代码如下

 <input type="text" name="searchkey" class="searchkey" list="json-datalist" placeholder="请输入搜索内容" oninput="getSearchResult(this.value, 'json-datalist')"  onchange="datalistchange(this.value, 'result')"/>
          <datalist id="json-datalist" >
         </datalist>

问题是选中datalis的选项后,我捕捉不到它的触发事件,反而触发了input的 oninput事件,然后又重新加载了datalist的内容。
怎样才能在选中datalist的选项后,不再动态加载datalist的内容的内容?
求各位大侠帮忙指点一下

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

5条回答

  • showbo GoCityPass新加坡曼谷通票 4年前

    oninput改为onkeydown,键盘事件在触发,否则datalist不支持事件,只要选中项就会触发input事件

    你这种直接也就是autocomplete,自己找下别人已经实现的autocomplete就行了

    jquery autocomplete下载

    点赞 1 评论 复制链接分享
  • wch_1982 wch_1982 4年前

    是手机软件,用onkeydown不是很好用

    点赞 评论 复制链接分享
  • wch_1982 wch_1982 4年前

    上楼是js代码
    这个就是html的代码


    点赞 评论 复制链接分享
  • wch_1982 wch_1982 4年前

    function getSearchResult(key, dlName) {
    key = key.trim();
    if (key == '' ) {
    return false;
    }
    //如果key中包含字母,则不进行后台查询
    if (isExistLetter(key)) {
    return false;
    }

    if(selectedflg==1){
      return false;
    }
    var dataList = document.getElementById(dlName);
    
    //清空当前数据
    clearDatalist(dlName);
    
    // Create a new XMLHttpRequest.
    var request = new XMLHttpRequest();
    
    // Handle state changes for the request.
    request.onreadystatechange = function (response) {
        if (request.readyState === 4) {
            if (request.status === 200) {
                // Parse the JSON
                var jsonOptions = JSON.parse(request.responseText);
    
                // Loop over the JSON array.
                jsonOptions.forEach(function (item) {
                    // Create a new <option> element.
                    var option = document.createElement('option');
                    // Set the value using the item in the JSON array.
                    option.value = item.search_name;
                    // Add the <option> element to the <datalist>.
                    dataList.appendChild(option);
                });
    
            } else {
                return false;
            }
        }
    };
    
    // Set up and make the request.
    var url = gethostUrl() + 'Tel/commonSearch'
    request.open('GET', url + '?key=' + encodeURI(key), true);
    request.send();
    

    }

    function datalistchange(key, dlName) {

    document.getElementById(dlName).innerHTML = key;
    treeReturn();
    

    }

    点赞 评论 复制链接分享
  • u014074697 张大教主 4年前
    把你的代码贴出来才能看问题啊
    
    点赞 评论 复制链接分享

为你推荐