jQueryの課題で助けて頂きたいことがあり、質問投稿させて頂きます

Question

前提・実現したいこと

jQueryで以下の条件をクリアする、完璧な入力ボックス（数値のみ）を作りたいです。

➀読み込み時のデフォルト値は「1」になる
➁前後ボタンでカウントアップ｜ダウンできる
➂「1」から「指定の最大値（$count_rows）」までの入力可能値が、直に入力できる
➃もし「指定の最大値」を超える値が直に入力されたら「指定の最大値」になる
➄クリックすると入力可能値が常に全件表示され、選択できる

発生している問題・エラーメッセージ

すべての条件を同時にクリアできません。

特に「直に入力できつつ（➂）、セレクトボックスのように選択肢が常に全件表示される（➄）」というのがとても難しいです。

該当のソースコード

対象となるのはこちらのHTML、CSSになります。

<div class="pagenation">
  <button type="button" class="pagenation_btn" data-type="prev" id="pagenation_prev"></button>
  <div class="pagenation_list">
    <input list="pagenation_select" value="1">
    <datalist id="pagenation_select">
        <!--
        この選択肢は以下PHPで出力されます
        <?php
        $count_rows = 4; // データベースのレコード数を取得（ここでは4件とする）
        for($i=1; $i<=$count_rows; $i++){
            echo "<option value='{$i}'</option>";
        }
        ?>
        -->
        <option value="1"></option>
        <option value="2"></option>
        <option value="3"></option>
        <option value="4"></option>
      </datalist>
  </div>
  <button type="button" class="pagenation_btn" data-type="next" id="pagenation_next"></button>
</div>  

/* 全体 */
.pagenation {
    display: flex;
    align-items: center;
}

/* 入力ボックス */
.pagenation input {
    width: 50px;
    height: 30px;
    margin: 0 10px;
    border-radius: 10px;
    text-align: center;
}

/* 前後ボタン */
#pagenation_prev,
#pagenation_next {
    border-top: solid 4px #5bc8ac;
    border-right: solid 4px #5bc8ac;
    width: 20px;
    height: 20px;
}
#pagenation_prev {
    transform: rotate(-135deg);
}
#pagenation_next {
    transform: rotate(45deg);
}

/* CSSリセット */
button {
    background: none;
    border: none;
    cursor: pointer;
}

試したこと

この２日間苦労して、大体の機能は作れたと思います。
ですが下記jQueryの最後の行でコメントしてありますように、➄の条件について、「常に全件表示」の方法がわかりません。

/*
➀読み込み時のデフォルト値は1
---------------------------------------------------------------------------*/
// この機能はHTMLのvalueで実現

/*
➁前後ボタンでカウントアップ｜ダウン
---------------------------------------------------------------------------*/
$(document).on('click','.pagenation_btn', function(ev){
	const type = $(this).attr('data-type');
	const current_val = parseInt( $('.pagenation_list input').val() );
	const after_val = type === 'prev' ? current_val+1 : current_val-1;
	$('.pagenation_list input').val(after_val);
});

/*
➂「1」から「指定の最大値（$count_rows）」までの入力可能値が、直に入力できる
---------------------------------------------------------------------------*/
// この機能はHTMLでdatalistを用いることで実現

/*
➃もし「指定の最大値」を超える値が入力されたら「指定の最大値」になる
---------------------------------------------------------------------------*/
$(document).on('change','.pagenation_list input', function(ev){
	const current_val = parseInt( $('.pagenation_list input').val() );
	const max_val = $('#pagenation_select option:last').val();
	if ( current_val >= max_val ) {
		$('.pagenation_list input').val(max_val);
	}
});

/*
➄クリックすると入力可能値が常に全件表示され、選択できる
---------------------------------------------------------------------------*/
// この機能はHTMLでdatalistを用いることで実現…
// しようとしたが、「常に全件」にはならず行き詰った

datalistを用いたのがまずかったのでしょうか。しかしただのselectでは「直に入力」がクリアできなくなってしまい、あちらを立てればこちらが立たずな状態で、完全に行き詰りました。

補足情報（FW/ツールのバージョンなど）

上記HTML、CSS、jQueryはすべて大きく変えてしまっても構いません。（選択肢はoptionタグじゃなくても大丈夫です。）

最新版の、jQuery3.4.1 での実現を希望です。

お手数をおかけして本当にすみませんが、宜しくお願い致します。

Comments

[m.ts10806]

タイトルには要件を記載してください。
https://teratail.com/help/question-tips#questionTips3-1
このタイトルでは何も内容がありません。
あと「課題」となると相談すべきは赤の他人ではなく出題者ではないでしょうか。

[miyabi_pudding]

jQueryを必ず使うという課題要件なのでしょうか？
ネイティブじゃないと逆に苦しくなりそうな要件な気がします。
また、課題のようなので、答えの回答はできません。
考え方くらいしか回答できませんが、それでもよろしいのでしょうか？

Answer 1

流れ的にはこんな感じでしょうか？

• codepen set pagenation

Comments

[hyadain]

そんな感じです！やはりネックは➄の「常に全件表示」ですね。
そちらのcodepenですと「2」が入力されているときにクリックすると「2」しか表示ができず「全件」ではなくなってしまい、それが大変難しいところだと思います。

[yambejp]

そうなるとdatalistは無理ですね。
datalistは前方一致するので値が入っていると他のモノは見せることはできません。
どうせjsで処理するのですからセレクトボックスとかでもいいですか？

[hyadain]

はい！セレクトボックスでも大丈夫です。ただ、

>selectでは「直に入力」がクリアできなくなってしまい、あちらを立てればこちらが立たず

というところで行き詰っているので、もしもそれをクリアできそうなのでしたらぜひ、お願いしたく思っています。

[yambejp]

サンプルを更新しました。確認してみてください

[hyadain]

完ッッッ璧な動作です。メソッドチェーンだらけ…スゴすぎです。感動をありがとうございました。

[yambejp]

ごめんなさい、multipleよりsize指定のほうが良さそうなで修正してあります

[hyadain]

なるほどです。それならばcount_rowsが少ないときに余計な高さがなくなりますね。さっそくそのようにして、さらに

$(function(){
const count_rows=30;
var size = ( count_rows < 10 ) ? count_rows : 10; // 追加

のようにsize変数を追加して、

.attr({'size':size})

のようにアレンジして、count_rowsが多いときにも備えてみました。

最後までありがとうございました。

Answer 2

➄クリックすると入力可能値が常に全件表示され、選択できる

がネックになっているようなので、
ここについて、考え方のみの回答とさせていただきます。

まず、datalist要素の仕様から考えていきましょう。
いわゆる、入力候補の表示が、主な仕様のように思えます。
つまり、
inputに値が入っている場合は、その値に付随する一覧が表示される仕様となっていますので、
値が入っている以上、全件表示はされません。

であるならば、
クリック時に値をクリアするようにすれば解決するかと思います。
つまり、値を直接入力する際は、クリックした瞬間だけ、input.value = "";とするわけです。
そうすれば、datalistの仕様として、全件表示ができるかと。
ただ、HTMLの仕様的にそれが適うかは、やってみないとわかりません。
もしかしたら、クリック時に、setTimeoutなどでタイムラグを作らないと、動作しない可能性もあります。

ヒント追記

クリックだと、挙動のタイミング的に、動作させるのは難しいようです。
なので、要素のフォーカスが重要になります。
（どの要素をフォーカスさせるかも大事）
なので、処理の中心をフォーカスさせた時何かをする、という考えでいくと、
構文を導けると思いますよ。

以上、HTML（datalist）の仕様から考えた、実装の仕方の方向性の一つです。
参考になれば幸いです。