Es ist nicht einfach, eine eigene Suchbibliothek zu erstellen, und Sie benötigen auch kein Google Search API, wenn Sie nur die Suchfunktion in der statischen Website benötigen. Sie können Angular JS zur Ausführung verwenden.
1.1 Definierte ng-App & ng-Controller Hauptkörperfunktion
<body ng-app="instantSearch" ng-controller="InstantSearchController">
1,2 Add ng-Modell
Boxfunktion
<input ng-model="searchString">
1,3 Add ng-repeat zu div oder li Funktion zur Suche um die Daten basierend auf der Suche aus dem Eingabefeld anzuzeigen
<div ng--repeat="i in items | searchFor: searchString">
2.1 Definieren Sie eine ne w Modul für Ihre Anwendung
var app = angular.module("instantSearch", []);
2,2 Erstellen Sie die Instant-Suchfilter
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 Bearbeiten Sie Ihre Controller
function InstantSearchController($scope) {
$scope.items = [
{
title1:'abc',
title2:'def'
},
{
title1:'ghi',
title2:'jkl'
}
];
}
Und jetzt können Sie die Elemente angezeigt werden, die das gleiche Ergebnis in Ihrem Suchbox.
Mögliches Duplikat von [Sie müssen eine Suche zur statischen HTML-Site hinzufügen] (http://stackoverflow.com/questions/24752806/need-to-add-a-search-to-static-html-site) –
Do willst du so etwas? IMG1: http://i.imgur.com/uJbEqIA.png IMG2: http://i.imgur.com/MOi8Q1c.png – hulkinBrain
@JoeEnos Nein, ich überprüfe auch diese Antwort vor, und ich will nicht um Google eins zu verwenden. –