코드에서 정적 웹 사이트의 검색 창 기능을 구현하는 방법은 무엇입니까?

나는 내 자신의 웹 사이트를 거의 완성했으며 현재 페이지에서 검색 기능을 구현하는 것이 얼마나 간단한 지 궁금합니다. 정적이며 사용자 입력을 포함하는 목록 항목 만 표시하면됩니다. stackoverflow의 일부 답변은 Google API에 조언을 제공하지만 검색 상자에 Google 로고가 표시되므로 저에게 적합하지 않습니다.코드에서 정적 웹 사이트의 검색 창 기능을 구현하는 방법은 무엇입니까?

제 3 자 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을 사용합니다. –

정적 검색 웹 사이트에서만 검색 기능을 필요로하는 경우 자체 검색 라이브러리를 만드는 것이 쉽지 않으며 Google 검색 API가 필요하지 않습니다. 각도로 JS를 사용하여 excute 할 수 있습니다.

1.1 NG-응용 프로그램 & NG 컨트롤러 본체 기능에 정의

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

박스 기능 검색

1.2 추가 NG 모델

<input ng-model="searchString">

1.3 추가 NG-반복 div이 할 리 기능 입력란에서 검색을 기반으로 데이터를 표시합니다.

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

2.1 정의 앱이

var app = angular.module("instantSearch", []);

2.2 w 모듈은 컨트롤러

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

코드에서 정적 웹 사이트의 검색 창 기능을 구현하는 방법은 무엇입니까?

답변

관련 문제