Question

我差不多完成了自己的网站，我想知道在当前页面中实现搜索功能有多么简单。它是静态的，只需要显示包含用户输入的列表项。 stackoverflow的一些答案建议谷歌API，但它会在搜索框中显示谷歌徽标，这对我不起作用。

是否有任何第三方API或一些简单的代码可以满足我的要求？

Answer 1

创建自己的搜索库并不容易，如果您只需要静态网站中的搜索功能，也不需要Google Search API。您可以考虑使用Angular JS来执行。

1.1定义的ng-app＆amp; ng-controller到主体功能

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

1.2将ng-model添加到搜索框功能

<input ng-model="searchString">

1.3在div或li函数中添加ng-repeat以根据输入框中的搜索显示数据

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

现在，您可以在搜索框中显示结果相同的项目。

如何在代码中实现静态网站的搜索框功能？

1 个答案: