私は自分のウェブサイトをほぼ完成させました。私は現在のページで検索機能をどのように簡単に実装できるのか不思議です。これは静的で、ユーザーの入力を含むリスト項目を表示するだけです。 stackoverflowからのいくつかの答えはGoogle APIにアドバイスしますが、検索ボックスにGoogleロゴが表示されますが、それは私には役に立たないものです。コード内の静的なWebサイトの検索ボックス機能を実装する方法は？
私の要件を満たすことができるサードパーティのAPIや単純なコードはありますか？
静的なウェブサイトで検索機能が必要な場合は、独自の検索ライブラリを作成するのは簡単ではなく、Google検索APIは必要ありません。 エクサートにAngular JSを使用することを検討できます。 DIVまたはLi関数にボックス機能
<input ng-model="searchString">
1.3追加ngのリピートを検索する
1.1定義されたNG-アプリ& NG-コントローラ本体機能に
<body ng-app="instantSearch" ng-controller="InstantSearchController">
1.2追加NG-モデル入力ボックスからの検索に基づいてデータを表示する
<div ng--repeat="i in items | searchFor: searchString">
2.1定義するあなたのアプリ
var app = angular.module("instantSearch", []);
2.2ワットのモジュールは、お使いのコントローラ
app.filter('searchFor', function() {
return function(arr, searchString) {
if(!searchString){
return arr;
}
var result = [];
searchString = searchString.toLowerCase();
angular.forEach(arr, function(item) {
if(item.title.toLowerCase().indexOf(searchString) !== -1){
result.push(item);
}
});
return result;
};
});
2.3編集
function InstantSearchController($scope) {
$scope.items = [
{
title1:'abc',
title2:'def'
},
{
title1:'ghi',
title2:'jkl'
}
];
}
を瞬時に検索フィルタを作成します。そして今、あなたはで同じ結果を持っているアイテムを表示することができます検索ボックス。
[静的HTMLサイトに検索を追加する必要があります]の複製があります。（http://stackoverflow.com/questions/24752806/need-to-add-a-search-to-static-html-site） –
Doこのようなものが欲しいですか？ IMG1：http://i.imgur.com/uJbEqIA.png IMG2：http://i.imgur.com/MOi8Q1c.png – hulkinBrain
@JoeEnosいいえ、前にこの回答をチェックしていますGoogle Oneを使用する –