インクリメンタルサーチ
jQueryを使ったインクリメンタルサーチのコードです。 データベースの中のitemを検索して出てきたitem名の横にある追加ボタンを押すとリストに追加され、リスト内のitem名の横にある削除ボタンを押すとリストの中から削除できる仕組みです。インクリメンタルサーチを勉強するための簡単なものなので実用性は低いです。 ネットで調べていろいろ組み合わせてるのであくまでも参考程度にどうぞ。
$(function() { $(document).on('turbolinks:load', function() { var result = $('#result'); var itemList = $('#items'); function appendItem(item) { var html = `<div class="item"> <p class="item__name">${item.name}</p> <a class="item-search-add item__btn item__btn--add" data-item-id="${item.id}" data-item-name="${item.name}">リストに追加</a> </div>` result.append(html); } function appendNoItem(noitem) { var html = `<div class="item">${ item }</div>` result.append(html); } function addItem(itemId, itemName) { var html = `<div id="item111" class="item"> <input name='list[item_ids][]' type='hidden' value='${itemId}'> <p class="item__name">${itemName}</p> <a class="item-search-remove item__btn item__btn--remove" data-item-id="${itemId}" data-item-name="${itemName}">リストから削除</a> </div>` itemList.append(html); } $('#item-search-field').on('keyup', function() { var input = $('#item-search-field').val(); $(result).empty(); if(input.length !== 0) { $.ajax({ type: 'GET', url: '/products', data: { keyword: input}, dataType: 'json' }) .done(function(items) { if (users.length !== 0) { itemss.forEach(function(item){ appendItem(item); }); } else { appendNoItem("一致するアイテムはありません"); } }) .fail(function() { alert("アイテム検索に失敗しました"); }) } }); $(document).on("click", ".item-search-add", function() { var itemId = $(this).attr("data-item-id"); var itemName = $(this).attr("data-item-name"); $(this).parent().remove(); addItem(itemId, itemName); }); $(document).on("click", ".item-search-remove", function() { $(this).parent().remove(); }); }); });
自分があるアプリを作ってるときのコードをまるまるコピペしてるのでクラス名とかid名とかわかりづらくてすみません。