在自动完成下拉列表中获取所选值

Get selected value in autocomplete dropdown

本文关键字：获取 下拉列表      更新时间：2023-09-26

我正在使用awesomplete插件来获得自动完成下拉列表。我可以让下拉列表工作，但我找不到访问所选值的直接方法！

这是jsfiddle：https://jsfiddle.net/8y8xpqfk/1/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Auto complete</title>
    <link rel="stylesheet" href="css/awesomplete.css"/>
    <script src="js/awesomplete.js" async></script>
</head>
<body>
<table>
    <tr>
        <td>
            <input class="awesomplete" list="mylist" onchange="callMe()"/>
            <datalist id="mylist">
                <option>Ada</option>
                <option>Java</option>
                <option>JavaScript</option>
                <option>Brainfuck</option>
                <option>LOLCODE</option>
                <option>Node.js</option>
                <option>Ruby on Rails</option>
            </datalist>
        </td>
</table>
<script>
    var callMe = function () {
        alert("Something selected..");
    }
</script>
</body>
</html>

函数从未被调用，onchange未被触发！

我已将事件侦听器附加到input事件。本次活动包括：

  • onchange
  • onkeyup
  • onpste（当支持时）

var input = document.querySelector(".awesomplete");
input.addEventListener("input", inputHandler);
function inputHandler() {
  alert(this.value)
}
<body>
<table>
    <tr>
        <td>
            <input class="awesomplete" list="mylist"/>
            <datalist id="mylist">
                <option>Ada</option>
                <option>Java</option>
                <option>JavaScript</option>
                <option>Brainfuck</option>
                <option>LOLCODE</option>
                <option>Node.js</option>
                <option>Ruby on Rails</option>
            </datalist>
        </td>
</table>
</body>

函数在定义之前被调用。我已经更改了jsfiddle加载类型，然后它就工作了。还要注意onselect和onchange之间的区别。更改将在您的输入模糊且值发生更改后触发。

https://jsfiddle.net/8y8xpqfk/11/

var callMe = function (elem) {
    alert("Onchange: "+elem.value);
}
var callMeToo = function (elem) {
    alert("Onselect: "+elem.value);
}

我的正在工作。为了获得选定的值，必须将event对象作为参数传递给callMe函数。然后您可以获取选定的值。

function callMe(event) {
        alert("Something selected.."+event.target.value);
}
<body>
<table>
    <tr>
        <td>
            <input class="awesomplete" list="mylist" onchange="callMe(event)"/>
            <datalist id="mylist">
                <option>Ada</option>
                <option>Java</option>
                <option>JavaScript</option>
                <option>Brainfuck</option>
                <option>LOLCODE</option>
                <option>Node.js</option>
                <option>Ruby on Rails</option>
            </datalist>
        </td>
</table>
</body>

您不能使用:selected，因为datalist元素可以有多个选项，但您可以观察输入的变化。以下是jQuery解决方案：
$("input").focusout(function(){ alert($(this).val()); });

您不需要使用onchange或onselect。Awesomecomplete有Awesomplete select和Awesomplete-selectcomplete等事件。请查看此链接以了解类似问题。真棒完成-获取所选文本

 <!DOCTYPE html>
<html>
<head> 
  <script type="text/javascript" src="awesomplete.min.js"></script>
  <link rel="stylesheet" type="text/css" href="awesomplete.css">  
</head>
<body>
<table>
    <tr>
        <td>
            <input class="awesomplete" list="mylist" id="someid" />
            <datalist id="mylist">
                <option>Ada</option>
                <option>Java</option>
                <option>JavaScript</option>
                <option>Brainfuck</option>
                <option>LOLCODE</option>
                <option>Node.js</option>
                <option>Ruby on Rails</option>
            </datalist>
        </td>
        </tr>
</table>
</body>
<script type="text/javascript">
document.getElementById('someid').addEventListener('awesomplete-selectcomplete',function(){
alert(this.value);
});
</script>
</html>
相关文章：