私は JavaScript の初心者なので、おそらく解決策は非常に単純です。
Twitter の typeahead.js を介して行われるオートコンプリート フィールドを含むフォームがあります。
フィールド place_name のタイプアヘッドは、プリフェッチと、都市および関連する ID のリモート リソースの両方をロードします。
たとえば、「piac」と入力すると呼び出されます
[ {"id" : "22351", "value": "Piacenza, Emilia-Romagna, IT"} ...... ]
Chrome では、place_name フィールドに適切に入力し、隠しフィールド place_id に ID 値を設定します。そのため、ユーザーが「piac」と入力し、次に矢印を押して Piacenza を選択すると、先行入力フィールドがフォーカスを失い、place_name フィールドと place_id フィールドの両方が正しく設定され、フォームのページ受信者に適切に渡されます。
IE10 互換モード、真の IE10、および IE9-8-7 では、先行入力機能を機能させることができません。piac、piace ... と入力すると、先行入力機能がトリガーされません。
ページの骨組みは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 の開発ツールでは、エラーはまったく表示されませんでした。
どうもありがとう