Javascript 在“自动完成”下拉列表中获取选定值_Javascript

Javascript 在“自动完成”下拉列表中获取选定值

javascript

Javascript 在“自动完成”下拉列表中获取选定值,javascript,Javascript,我正在使用awesomplete插件来获得一个自动完成下拉列表。我能够让下拉菜单工作，但是我发现没有直接的方法来访问所选的值以下是JSFIDLE：自动完成艾达 JAVA JavaScript 笨蛋 LOLCODE Node.js RubyonRails var callMe=函数（）{ 警惕（“被选中的某物”）； } 函数永远不会被调用，onchange不会被触发我已将事件侦听器附加到输入事件。该活动包括：一旦改变 onkeyup onpaste（受支持时） var inpu

我正在使用awesomplete插件来获得一个自动完成下拉列表。我能够让下拉菜单工作，但是我发现没有直接的方法来访问所选的值

以下是JSFIDLE：


自动完成
艾达
JAVA
JavaScript
笨蛋
LOLCODE
Node.js
RubyonRails
var callMe=函数（）{
警惕（“被选中的某物”）；
}

函数永远不会被调用，

onchange

不会被触发

我已将事件侦听器附加到

输入

事件。该活动包括：

一旦改变
onkeyup
onpaste（受支持时）

var input=document.querySelector（“.awesomplete”）；
input.addEventListener（“input”，inputHandler）；
函数inputHandler（）{
警报（此.value）
}


艾达
JAVA
JavaScript
笨蛋
LOLCODE
Node.js
RubyonRails

我已将事件侦听器附加到

输入

事件。该活动包括：

一旦改变
onkeyup
onpaste（受支持时）

var input=document.querySelector（“.awesomplete”）；
input.addEventListener（“input”，inputHandler）；
函数inputHandler（）{
警报（此.value）
}


艾达
JAVA
JavaScript
笨蛋
LOLCODE
Node.js
RubyonRails

我的正在工作。为了获得所选的值，您必须将

事件

对象作为参数传递给

callMe

函数。然后您可以获取所选的值

函数调用（事件）{
警报（“所选某物..”+事件.目标.值）；
}


艾达
JAVA
JavaScript
笨蛋
LOLCODE
Node.js
RubyonRails

我的正在工作。为了获得所选的值，您必须将

事件

对象作为参数传递给

callMe

函数。然后您可以获取所选的值

函数调用（事件）{
警报（“所选某物..”+事件.目标.值）；
}


艾达
JAVA
JavaScript
笨蛋
LOLCODE
Node.js
RubyonRails

您不能使用

：选中的，因为数据列表
元素可以有多个选项，但您可以查看输入的更改。这里有一个jQuery解决方案：

$（“输入”）.focusout（函数（）{
警报（$（this.val（））；
}); 
您不能使用：选中的，因为数据列表
元素可以有多个选项，但您可以查看输入的更改。这里有一个jQuery解决方案：

$（“输入”）.focusout（函数（）{
警报（$（this.val（））；
}); 
函数在定义之前被调用。我已经更改了JSFIDLE加载类型，然后它就可以工作了。还要注意onselect和onchange之间的区别。更改将在输入模糊且值已更改后触发

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

您不需要使用onchange或onselect。Awesomplete具有诸如Awesomplete select和Awesomplete selectcomplete之类的事件。
检查此链接以了解类似问题。


艾达
JAVA
JavaScript
笨蛋
LOLCODE
Node.js
RubyonRails
document.getElementById（'someid'）。addEventListener（'awesomplete-selectcomplete'，function（）{
警报（该值）；
});
您不需要使用onchange或onselect。Awesomplete具有Awesomplete select和Awesomplete selectcomplete等事件。
检查此链接以了解类似问题。


艾达
JAVA
JavaScript
笨蛋
LOLCODE
Node.js
RubyonRails
document.getElementById（'someid'）。addEventListener（'awesomplete-selectcomplete'，function（）{
警报（该值）；
});
选择的onselect
应该是onchange
。为了纠正我的错误，它还是一样的。我正在检查onselect
并粘贴了相同的代码，现在已更新。onselect
应该是onchange
。为了纠正我，它仍然是一样的。我正在检查onselect
并粘贴相同的代码，现在更新。这不使用更改事件，也不使用onchange事件。问题是寻找所选值的解决方案。Onchange是他们正在使用的事件，但我看不到任何东西表明它是必需的/需要的。我遗漏了什么吗？onchange是HTML属性和DOM属性名（aka），事件类型是change，根据。参见element.addEventListener（'change'，…）。虽然OP使用了“onselect”，但也有：“…onchange未被触发”，因此似乎更改事件是有意的（或非有意的），“似乎”是相对的，您无法量化
<!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>

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

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

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