今日はホームページの検索ボックスを作りました.
2726 ワード
検索ボックスに内容を入力すると、該当する内容がプルダウンボックスに表示されます.条件に該当する内容がないと条件に該当しない検索が提示されます.
<br> $(document).ready(function () {<br><br> });<br><br> var Search = function () {<br> function show_select_result(result) {<br> if (result.length == 0) {<br> not_search_result();<br> }<br> else {<br> clear_search_result();<br> _.each(result, function (item) {<br> $('.search-result').append("<li><a href='#'>" + item + "</a></li>");<br> })<br> }<br> }<br> function clear_search_result() {<br> $('.search-result li').remove();<br> $('.search-result p').remove();<br> }<br> function not_search_result() {<br> clear_search_result();<br> $('.search-result').append("<p> </p>");<br> }<br> return {<br> init: function (array) {<br> var search = $('.search-input input').val();<br> if(search.length > 0) {<br> $('.search-result').removeClass('hidden');<br> if(array.length != 0) {<br> var result = [];<br> _.each(array, function(el) {<br> if (el.indexOf(search) != -1) {<br> result.push(el);<br> }<br> })<br> show_select_result(result);<br> }<br> else{<br> not_search_result();<br> }<br> }<br> else{<br> $('.search-result').addClass('hidden')<br> }<br> }<br> }<br> }();<br><br>