https://jsfiddle.net/nuov0ajw/
这是我的 fiddle 代码，我想在我的 cordova 应用程序中使用它，但代码的执行在行处中断
list2.add(option);
我无法弄清楚为什么它在 safari 浏览器上运行良好。
在 ios 设备中启动时，cordova 应用程序是否适用于 ios 用户 safari 的 Web View ？
choose: <input type="text" list="languages" id="input_box">
<label for="languages">
<datalist id="languages">
<select id = "add_records">
</select>
</datalist>
</label>
<button onclick="abc();">get</button>
java 脚本位于此处:
var i;
var options = ["ASB", "SDJC" ,"S SDBCS" ,"SJDCJS OPWNX"];
//var list_allrec = document.getElementById('mylist');
var list2 = document.getElementById('add_records');
options.forEach(function (item) {
var option = document.createElement('option');
option.value = item;
list2.add(option);
});
//$('#get').on('click',abc);
function abc (){
//alert("Inside getval();");
var val1=$("#input_box").val();
alert(val1);
}
此外，我还包含了 datalist.polyfill.min.js 文件，该文件可在 github 上找到:https://github.com/Fyrd/purejs-datalist-polyfill
我也按照答案中的建议尝试了新的应用程序
html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Trial App</title>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function() {
alert("Inside document ready")
var aTags = ["anuj", "all", "ball", "one", "blackberry", "zathura","friends", "game of thrones", "sport"];
$( "#autocomplete" ).autocomplete({
source: aTags
});
$('#get').on('click', get);
function get() {
//alert("Inside getval();");
var val1 = $("#autocomplete").val();
alert("Value inside text box is: "+val1);
}
});
</script>
</head>
<body>
<h1>Trial App</h1>
<input type='text' title='Tags' id='autocomplete' />
<button id="get">get</button>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
但是不行，附上应用截图
最佳答案
在 $(document).ready() 事件中添加代码
这里是更新的 fiddle jsfiddle
jsfiddle使用添加方法
HTML
<input type='text' title='Tags' id='autocomplete' />
JS
$(document).ready(function() {
var aTags = ["anuj", "all", "ball", "one", "blackberry", "zathura","friends", "game of thrones", "sport"];
$( "#autocomplete" ).autocomplete({
source: aTags
});
});
编辑 1
只需使用 jquery 自动完成
这里是fiddle .
编辑2
更新的完整代码
这是完整的html代码和js代码。
<!DOCTYPE html>
<html>
<head>
<title>autocomplete demo</title>
</head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/black-tie/jquery-ui.css">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
var aTags = ["anuj", "all", "ball", "one", "blackberry", "zathura", "friends", "game of thrones", "sport"];
$("#autocomplete").autocomplete({
source: aTags
});
$('#get').on('click', get);
function get() {
//alert("Inside getval();");
var val1 = $("#autocomplete").val();
alert("Value inside text box is: " + val1);
}
});
</script>
<body>
<input type='text' title='Tags' id='autocomplete' />
<button id="get">get</button>
</body>
</html>
只需包含 jquery-ui.js 和 jquery-ui.css 即可。稍后您可以自定义 css。
希望这有帮助。
关于Javascript .add(选项)在cordova ios项目中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46640416/