0

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

我有一个通过 twitter 的 typeahead.js 完成的带有自动完成字段的表单。

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

例如输入“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 ... 任何字符串，都不会触发 typeahead 功能。

页面骨架来自initializr.com，所以它是html5样板+引导程序，没有引导程序自己的预输入。

这些是相关的代码片段：

页面中的 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 的开发工具，我根本看不到任何错误。

非常感谢

4

0 回答 0