質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1657閲覧

jQueryUIのautocompleteを使用するが、スクロールバーを押しても下に行かない(IEのみ)

unfcs

総合スコア11

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/09/25 05:59

編集2017/09/25 06:47

###発生している問題

jQueryUIのautocompleteを使用して照会システムを作成しています。 カーソルをフィールドに合わせると、下記画像のように表示されます。 ここで、スクロールバーの↓下矢印を押しても、カーソルが一番上に行ってしまって下がりません。 試したところ、IEのみの現象のようです。 IEでも、autocompleteを使用したいです。教えて下さい。 よろしくお願いします。

autocomplete

###ソースコード

javascript

1$('#code').autocomplete({ 2 source : data, 3 autoFocus : false, 4 delay : 1, 5 minLength : 0, 6 position : {my: 'left bottom',at: 'left top'}, 7}).focus(function() { 8 $(this).autocomplete("search", ""); 9}); 10 11※dataはjson形式 12{"value":"TST01","label":"TST01:TESTNAME1","name":"TESTNAME1"}, 13{"value":"TST02","label":"TST02:TESTNAME2","name":"TESTNAME2"}, 14{"value":"TST03","label":"TST03:TESTNAME3","name":"TESTNAME3"}, 15{"value":"TST04","label":"TST04:TESTNAME4","name":"TESTNAME4"}, 16{"value":"TST05","label":"TST05:TESTNAME5","name":"TESTNAME5"}, 17{"value":"TST06","label":"TST06:TESTNAME6","name":"TESTNAME6"}, 18{"value":"TST07","label":"TST07:TESTNAME7","name":"TESTNAME7"}, 19{"value":"TST08","label":"TST08:TESTNAME8","name":"TESTNAME8"}, 20{"value":"TST09","label":"TST09:TESTNAME9","name":"TESTNAME9"}, 21{"value":"TST10","label":"TST10:TESTNAME10","name":"TESTNAME10"}, 22{"value":"TST11","label":"TST11:TESTNAME11","name":"TESTNAME11"}, 23{"value":"TST12","label":"TST12:TESTNAME12","name":"TESTNAME12"}, 24{"value":"TST13","label":"TST13:TESTNAME13","name":"TESTNAME13"}, 25{"value":"TST14","label":"TST14:TESTNAME14","name":"TESTNAME14"}, 26{"value":"TST15","label":"TST15:TESTNAME15","name":"TESTNAME15"}, 27{"value":"TST16","label":"TST16:TESTNAME16","name":"TESTNAME16"}, 28{"value":"TST17","label":"TST17:TESTNAME17","name":"TESTNAME17"}, 29{"value":"TST18","label":"TST18:TESTNAME18","name":"TESTNAME18"}, 30{"value":"TST19","label":"TST19:TESTNAME19","name":"TESTNAME19"}, 31{"value":"TST20","label":"TST20:TESTNAME20","name":"TESTNAME20"}, 32{"value":"TST21","label":"TST21:TESTNAME21","name":"TESTNAME21"}, 33{"value":"TST22","label":"TST22:TESTNAME22","name":"TESTNAME22"}, 34{"value":"TST23","label":"TST23:TESTNAME23","name":"TESTNAME23"}, 35{"value":"TST24","label":"TST24:TESTNAME24","name":"TESTNAME24"}, 36{"value":"TST25","label":"TST25:TESTNAME25","name":"TESTNAME25"}, 37{"value":"TST26","label":"TST26:TESTNAME26","name":"TESTNAME26"}, 38{"value":"TST27","label":"TST27:TESTNAME27","name":"TESTNAME27"}, 39{"value":"TST28","label":"TST28:TESTNAME28","name":"TESTNAME28"}, 40{"value":"TST29","label":"TST29:TESTNAME29","name":"TESTNAME29"}, 41{"value":"TST30","label":"TST30:TESTNAME30","name":"TESTNAME30"}

###試したこと
Chrome、firefoxで試しましたがうまくいきます。
IEのみの現象だと思われます。

###バージョン情報
jQuery:jquery.min.3.2.1
jQueryUI:jquery-ui-1.12.1
IE:11

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/09/25 06:12

サンプルで結構ですのでdataの中身をご提示ください。
unfcs

2017/09/25 06:49

了解しました。質問を更新しましたので、確認お願いします。
guest

回答1

0

ベストアンサー

以前似たような質問がありました。これで解決するでしょうか?
https://teratail.com/questions/79463

-- 9/26 14:15 追記

jquery-uiの_scrollIntoViewに問題があるのはわかっているので、直接スクリプトを変更する手を思いつきます。
(jquery-ui-1.12.1.js 5332-5334行目をコメントアウト)

JavaScript

1 if ( offset < 0 ) { 2// this.activeMenu.scrollTop( scroll + offset ); 3// } else if ( offset + itemHeight > elementHeight ) { 4// this.activeMenu.scrollTop( scroll + offset - elementHeight + itemHeight ); 5 }

ただこれは.min.jsが使えない・バージョンアップが面倒という問題があるので以前のように書き換えてみます。

JavaScript

1 $.widget('ui.autocomplete2', $.ui.autocomplete, { 2 _create: function() { 3 $.ui.autocomplete.prototype._create.apply(this, arguments); 4 this._createAutocomplete(); 5 }, 6 _createAutocomplete: function() { 7 // var menu = $(this.input.autocomplete("widget")).data("ui-menu"); 8 var menu = this.menu; 9 var originalScrollIntoView = menu._scrollIntoView; 10 menu._scrollIntoView = function (item) { 11 if (this._hasScroll()) { 12 borderTop = parseFloat($.css(this.activeMenu[0], "borderTopWidth")) || 0; 13 paddingTop = parseFloat($.css(this.activeMenu[0], "paddingTop")) || 0; 14 var offset = item.offset().top - this.activeMenu.offset().top - borderTop - paddingTop; 15 if (offset < 0) { 16 // Glitchy 'offset', do nothing. 17 return; 18 } 19 } 20 21 originalScrollIntoView.apply(this, arguments); 22 } 23 } 24 });

JavaScript

1// 変更したほうを呼ぶ。 2$('#code').autocomplete2();

投稿2017/09/25 07:41

編集2017/09/26 05:22
x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

unfcs

2017/09/25 08:02

回答ありがとうございます。 確認したところ、質問内容がすごく似ています。 そこで、ひとつ質問させてください。 「_createAutocomplete の最後に追加する」と書いてあるのですが、 jQueryUIに_createAutocompleteのような記述がないです。 どこに追加したら、良いのでしょうか?
unfcs

2017/09/26 12:24

回答ありがとうございます。 丁寧に教えていただき、非常に助かります。 実際に試したところ、↓は機能しました。 そこで、また、問題が見つかってしまいました。 inputに入力するとその条件でデータが選択されて表示されますが、 ここで↓を押すと、条件が外れて全データが表示されてしまいます。 すいませんが、また教えてくれませんか?よろしくお願いします。
x_x

2017/09/27 02:13

focusで無条件に出すのではなく、すでにautocompleteが表示されているかどうか見たらどうでしょうか? if (!$('.ui-autocomplete:visible').length) { $(this).autocomplete2("search", ""); }
unfcs

2017/09/27 02:32

回答ありがとうございます。 実際に試したところ、イメージ通りの動きになりました。 すごい助かりました。 最後まで、丁寧に教えていただきありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問