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年前
    把你的代码贴出来才能看问题啊
    点赞 评论 复制链接分享
提交

为你推荐