如何在代碼中實現靜態網站的搜索框功能？

我幾乎完成了自己的網站，我想知道在當前頁面中可以實現搜索功能有多簡單。它是靜態的，只需要顯示包含用戶輸入的列表項。來自stackoverflow的一些答案建議Google API，但它會在搜索框中顯示Google徽標，這對我來說不起作用。如何在代碼中實現靜態網站的搜索框功能？

有沒有第三方API或一些簡單的代碼可以滿足我的要求？

來源

2016-06-21 Le Yang

[需要將搜索添加到靜態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搜索API。你可以考慮使用Angular JS來執行。

1.1定義NG-應用& NG-控制器主體功能

<body ng-app="instantSearch" ng-controller="InstantSearchController">

1.2添加NG-模型在搜索框功能

<input ng-model="searchString">

1.3添加NG-重複，以股利或李功能根據輸入框中的搜索顯示數據

<div ng--repeat="i in items | searchFor: searchString">

2.1定義一個ne爲您的應用程序

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' 
     } 
    ]; 
}

現在你可以顯示其在相同的結果的項目你搜索框。

來源

2016-06-21 22:55:22

如何在代碼中實現靜態網站的搜索框功能？

回答

相關問題