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

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

ただいまの
回答率

90.76%

  • jQuery

    6336questions

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

  • jQuery UI

    154questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 680

unfcs

score 3

発生している問題

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

autocomplete

ソースコード

$('#code').autocomplete({
    source      : data,
    autoFocus   : false,
    delay       : 1,
    minLength   : 0,
    position    : {my: 'left bottom',at: 'left top'},
}).focus(function() {
    $(this).autocomplete("search", "");
});

※dataはjson形式
{"value":"TST01","label":"TST01:TESTNAME1","name":"TESTNAME1"},
{"value":"TST02","label":"TST02:TESTNAME2","name":"TESTNAME2"},
{"value":"TST03","label":"TST03:TESTNAME3","name":"TESTNAME3"},
{"value":"TST04","label":"TST04:TESTNAME4","name":"TESTNAME4"},
{"value":"TST05","label":"TST05:TESTNAME5","name":"TESTNAME5"},
{"value":"TST06","label":"TST06:TESTNAME6","name":"TESTNAME6"},
{"value":"TST07","label":"TST07:TESTNAME7","name":"TESTNAME7"},
{"value":"TST08","label":"TST08:TESTNAME8","name":"TESTNAME8"},
{"value":"TST09","label":"TST09:TESTNAME9","name":"TESTNAME9"},
{"value":"TST10","label":"TST10:TESTNAME10","name":"TESTNAME10"},
{"value":"TST11","label":"TST11:TESTNAME11","name":"TESTNAME11"},
{"value":"TST12","label":"TST12:TESTNAME12","name":"TESTNAME12"},
{"value":"TST13","label":"TST13:TESTNAME13","name":"TESTNAME13"},
{"value":"TST14","label":"TST14:TESTNAME14","name":"TESTNAME14"},
{"value":"TST15","label":"TST15:TESTNAME15","name":"TESTNAME15"},
{"value":"TST16","label":"TST16:TESTNAME16","name":"TESTNAME16"},
{"value":"TST17","label":"TST17:TESTNAME17","name":"TESTNAME17"},
{"value":"TST18","label":"TST18:TESTNAME18","name":"TESTNAME18"},
{"value":"TST19","label":"TST19:TESTNAME19","name":"TESTNAME19"},
{"value":"TST20","label":"TST20:TESTNAME20","name":"TESTNAME20"},
{"value":"TST21","label":"TST21:TESTNAME21","name":"TESTNAME21"},
{"value":"TST22","label":"TST22:TESTNAME22","name":"TESTNAME22"},
{"value":"TST23","label":"TST23:TESTNAME23","name":"TESTNAME23"},
{"value":"TST24","label":"TST24:TESTNAME24","name":"TESTNAME24"},
{"value":"TST25","label":"TST25:TESTNAME25","name":"TESTNAME25"},
{"value":"TST26","label":"TST26:TESTNAME26","name":"TESTNAME26"},
{"value":"TST27","label":"TST27:TESTNAME27","name":"TESTNAME27"},
{"value":"TST28","label":"TST28:TESTNAME28","name":"TESTNAME28"},
{"value":"TST29","label":"TST29:TESTNAME29","name":"TESTNAME29"},
{"value":"TST30","label":"TST30:TESTNAME30","name":"TESTNAME30"}

試したこと

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

バージョン情報

jQuery:jquery.min.3.2.1
jQueryUI:jquery-ui-1.12.1
IE:11

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2017/09/25 15:12

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

    キャンセル

  • unfcs

    2017/09/25 15:49

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

    キャンセル

回答 1

checkベストアンサー

+1

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

-- 9/26 14:15 追記

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

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

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

    $.widget('ui.autocomplete2', $.ui.autocomplete, {
        _create: function() {
            $.ui.autocomplete.prototype._create.apply(this, arguments);
            this._createAutocomplete();
        },
        _createAutocomplete: function() {
            // var menu = $(this.input.autocomplete("widget")).data("ui-menu");
            var menu = this.menu;
            var originalScrollIntoView = menu._scrollIntoView;
            menu._scrollIntoView = function (item) {
                if (this._hasScroll()) {
                    borderTop = parseFloat($.css(this.activeMenu[0], "borderTopWidth")) || 0;
                    paddingTop = parseFloat($.css(this.activeMenu[0], "paddingTop")) || 0;
                    var offset = item.offset().top - this.activeMenu.offset().top - borderTop - paddingTop;
                    if (offset < 0) {
                        // Glitchy 'offset', do nothing.
                        return;
                    }
                }

                originalScrollIntoView.apply(this, arguments);
            }
        }
    });
// 変更したほうを呼ぶ。
$('#code').autocomplete2();

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/25 17:02

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

    キャンセル

  • 2017/09/26 21:24

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

    キャンセル

  • 2017/09/27 11:13

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

    キャンセル

  • 2017/09/27 11:32

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

    キャンセル

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

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • jQuery

    6336questions

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

  • jQuery UI

    154questions

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