検索ボックスに入力された値や数を取得するjQuery

更新日：2016年5月15日

検索ボックスに入力された値や半角スペース区切りで入力された複数の値、または入力された値の数をjQueryで取得したいのに思うように取得出来なくて困ったという経験をしたことのある方は少なくないのではないでしょうか？
私が過去にそうだったのでその気持ちよーく分かります(笑)

ということでこのページではそれらの取得の仕方をご紹介します。

ちなみに下記のような検索ボックスが表示されます。
半角（全角でも可）スペース区切りでキーワードを入力して検索ボタンをクリックしてみると、1つ目のキーワードとキーワードの数をalertで表示します。

早速例のHTMLですが

と記述します。

次にjQueryには

$(function() {
	$("#search_button").click(function() {
		if($('form input[name="search_box"]').val() == "") {
			alert("キーワードを入力して下さい。");
			return false;
		}
		var search_catch = $("#search_box").val();
		var space = search_catch.replace(/　/g," ").split(" ");
		var totalNumber = space.length;
		alert(space[0]);
		alert(totalNumber);
	});
});

と記述します。

簡単に説明すると、
if($('form input[name="search_box"]').val() == '') {
では検索ボックスにキーワードが何も入力されていなければ「キーワードを入力して下さい。」とアラートを出すようにしています。

var search_catch = $("#search_box").val();
では検索ボックスに入れられた値を取得し、変数search_catchに格納。

var space = search_catch.replace(/　/g," ").split(" ");
では検索ボックスに入れられた値を取得し、半角スペース区切りで配列。もしも全角スペースが入力されていた場合には強制的に半角スペースに置換するように設定。変数spaceに格納。

var totalNumber = space.length;
では変数spaceの数を取得しています。

alert(space[0]);
alert(totalNumber);
でアラートを出しています。
検索ボックスに入れられた値は半角スペース区切りで配列されているので、alert(space[1]);にすれば2つ目のキーワードが取れますし、alert(space[2]);にすれば3つ目のキーワードが取得出来る仕組みです。

上記のソースを応用すれば色んなことに活用出来ます！
是非覚えておきましょう！