Question

我正在使用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不会被触发！

Answer 1

我已将事件监听器附加到input事件。该活动包括：

平变化
onkeyup
onpaste（支持时）

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>

Answer 2

在定义函数之前调用该函数。我改变了jsfiddle加载类型，然后就可以了。还要注意onselect和onchange之间的区别。输入模糊后，更改将触发，并且值已更改。

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

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

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

Answer 3

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

＆＃13;

function callMe(event) {
        alert("Something selected.."+event.target.value);
}

＆＃13;

<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>

＆＃13;

Answer 4

您无法使用:selected，因为datalist元素可以有多个选项，但您可以观看输入以进行更改。这是一个jQuery解决方案：
$("input").focusout(function(){ alert($(this).val()); });

Answer 5

您不需要使用onchange或onselect.Awesomplete具有awesomplete-select和awesomplete-selectcomplete等事件。检查此链接是否存在类似问题。 Awesomplete - get selected text

 <!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>

在自动填充下拉列表中获取所选值

5 个答案: