Question

我是javascript的大菜鸟，所以解决方案可能非常简单。

我有一个表单，其中包含通过twitter的typeahead.js完成的自动填充字段。

字段place_name的typeahead加载预取和城市及相关ID的远程资源。

e.g。输入“piac”它会调用

[ {"id" : "22351", "value": "Piacenza, Emilia-Romagna, IT"} ...... ]

在Chrome上

，它会正确填充place_name字段，并使用ID值设置隐藏字段place_id。因此，当用户键入“piac”，然后键入向下箭头以选择Piacenza，然后typeahead字段失去焦点，place_name和place_id字段都正确设置并正确传递给表单的页面收件人。

在IE10兼容模式下，真正的IE10，以及IE9-8-7，我无法使预先输入功能正常工作。我键入piac，piace ...任何字符串，未触发预先输入功能。

页面骨架来自initializr.com，因此它是html5样板文件+ bootstrap，没有bootstrap自己的预先输入。

以下是相关的代码段：

页面中的

HTML：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <link rel="stylesheet" href=http://sandbox/public/css/bootstrap.min.css>
    <link rel="stylesheet" href=http://sandbox/public/css/bootstrap-responsive.min.css>
    <link rel="stylesheet" href=http://sandbox/public/css/typeahead.js-bootstrap.css>
    <link rel="stylesheet" href=http://sandbox/public/css/main.css>
    <script src=http://sandbox/public/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js         </script>
</head>
... (page)
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src=http://sandbox/public/js/vendor/jquery-1.9.1.min.js><\/script>')</script>
    <script src=http://sandbox/public/js/vendor/bootstrap.min.js></script>
    <script src=http://sandbox/public/js/typeahead.min.js></script>
    <script src=http://sandbox/public/js/hogan.min.js></script>
    <script src=http://sandbox/public/js/main.js></script>

表单字段html：

<label for="place_name" class="input-block-level muted">Where do you live?</label>        
<input placeholder="Type the first letters (e.g. bat for Batman, TR)" class="input-block-level" id="place_name" autocomplete="off" name="place_name" type="text">
<input id="place_id" name="place_id" type="hidden">

包含在main.js中：

$(document).ready(function() {

  $('#place_name').typeahead({                              
    name: 'place_name',
    prefetch: '/public/json/pplca12.json',
    remote: 'http://sandbox/public/jsonplaces/%QUERY'  ,                                           
    limit: 10                                      
  });
  $('#place_name').on("typeahead:selected typeahead:autocompleted", function(e,datum) { 
    document.getElementById('place_id').value = datum.id;
  });
});

我做错了什么或忽略了什么？我无法通过IE的开发工具看到任何错误。

非常感谢

autocomplete.js无法在Internet Explorer中工作

0 个答案: