2017-10-09 85 views
1

https://jsfiddle.net/nuov0ajw/的Javascript。新增(可选)在科尔多瓦的ios不工作项目

这里是我的小提琴代码,我想在我的cordova应用程序中使用,但码处断裂行的执行

列表2。添加(可选);

我无法弄清楚为什么它在safari浏览器上运行良好。 在ios设备中启动时,是否适用于ios Safari浏览器的用户Web视图?

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> 

但它不工作,在安装应用程序的截图

The screenshot of the application in work here!

+0

jsfiddle包含错误,您是否尝试调试? –

+0

@ Anuj.T jsfiddle包含哪些类型的错误?是的,我已经尝试在xcode中调试,但执行失败在行list2.add(选项)。 –

回答

0

添加您的代码在$(文件)。就绪()事件

这里更新小提琴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

更新的全CODE

这里是JS代码整个HTML代码。

<!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,你需要include..you以后可以自定义CSS jQuery的ui.css。

希望这会有所帮助。

+0

尝试了上述解决方案,但它适用于Android和Windows平台,但不适用于iOS,无法弄清楚为什么? –

+0

Safari浏览器不支持datalist标签..这就是为什么它不在ios中工作。所以现在你想实现什么?因为除了数据元素之外,我们必须找到其他方式。 –

+0

如果您在Github上提供了文件datalist.polyfill.min.js文件,那么Safari浏览器中的数据列表可以使用:https://github.com/Fyrd/purejs-datalist-polyfill,如问题中所述。提问中提到的小提琴在safari浏览器上工作 –