前提・実現したいこと
ページ内リンク検索機能なのですが、文字列の前方一致となっています。
これを文字列の部分一致に変えたいです。
どのコードをどのように変えたらよろしいでしょうか?
以上、よろしくお願い致します。
(あるサイトのソースコードを参照しており多少改造させて頂きました。)
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8" /> 5 <script src="jquery.min.js"></script> 6 <script src="main.js"></script> 7 <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> --> 8 <link rel="stylesheet" type="text/css" href="style.css"> 9 </head> 10 <body> 11 <div class="form-group"> 12 <input type='text' id="keyword" class="form-control" placeholder="好きなフルーツを入力してください"> 13 <button type="button" id="submit" class="btn">検索</button> 14 </div> 15 <ul id = "list" ></ul> 16 </body>
該当のソースコード
main.js
1var fruits = [ {href:"#", text:"apple"}, {href:"#", text:"bin"} ] 2 3$(function() { 4 var list = $("#list"); 5 // id="list"を持つ変数を定義 6 var preWord; 7 // 入力結果と比較するための変数preWordを設定 8 9 function appendList(word) { 10 var item = $('<li class="list">').append($('<a>').prop('href', word.href).text(word.text)); 11 // class="list"で削除という命令のため、全てのアイテムにclass="list"を追加 12 list.append(item); 13 // var list = $("#list")のlistの中に、class="list"を持ったitemを追加 14 } 15 16 function editElement(element) { 17 var result = "^" + element; 18 // mapで回ってきた配列の各要素の前に^を付け加える 19 return result; 20 } 21 22 $("#keyword").on("keyup", function() { 23 // id="keyword"のキーが押されて上がった時に発火する。 24 var input = $("#keyword").val(); 25 // 変数inputを設定し、id="keyword"のバリューを中に入れる 26 var inputs = input.split(" ").filter(function(e) { return e; }); 27 // splitを使い空白で切り新しい配列を形成。aスペース3つbの場合、["a", "", "", "b"]となる。 ※ 1 分け方の解説 28 // filterでfunction(e)のeに配列がそれぞれ入り、true or falseでtrueのもののみ返す。""はfalseになるため消える。 ※ 2 filterについての解説 29 var newInputs = inputs.map(editElement); 30 // 後の正規化表現のために、配列の各要素に^を付け加える。(ex)^ap 文字の先頭がapのときマッチ 31 var word = newInputs.join("|"); 32 // 後の正規化表現のために、配列の各要素を|を使って連結。(ex) a|b aまたはbにマッチ 33 // この時点で、最初の入力が a b なら、^a|^b のように加工されており、先頭aもしくは先頭bにマッチ、となる。 34 var reg = RegExp(word); 35 // 加工されたwordからパターンマッチの正規化オブジェクトを生成して変数regに入れる。 36 37 if (input.length === 0) { 38 $(".list").remove(); 39 // フォームに値がないときに、listを全て削除する。 40 } 41 42 if (word != preWord && input.length !== 0) { 43 // word != preWordで値が変わっていることを確認(shiftとか押された時対策) 44 // input.length !== 0で何か値が入っていることを確認 45 $(".list").remove(); 46 // class = "list"を全て削除し、リストを空にする 47 $.each(fruits, function(i, fruit) { 48 if (fruit.text.match(reg)) { 49 // 配列fruitsがreg(正規化オブジェクト)とマッチしていたらappendListする 50 appendList(fruit); 51 } 52 }); 53 54 if ($(".list").length === 0) { 55 // $(".list").length === 0は当てはまるものがないということなので、その処理。 56 appendList("一致する果物はありませんでした"); 57 } 58 } 59 preWord = word; 60 // preWordにwordを入れてpreWordを更新する 61 }); 62});
試したこと
すいませんJSあまり書けないもので、
単純にレシピサイトにある部分一致コードと入れ替えたりしたり等のことしかしてません。
補足情報(FW/ツールのバージョンなど)
本番環境がIEです。(一応...)
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/07/12 10:08