This React component example helps you to create a search filter functionality on the webpage. It renders a search form along with a list of items. The list fetches through an API call and render on the webpage. You can integrate this component into your React app to allow users to search & filter text.
How to Create React Search Filter Example
First of all, load the Google Fonts and Font Awesome CSS by adding the following CDN links into the head tag of your web/app project.
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
Create the HTML structure as follows:
<div class="main"> <div id="root"></div> </div>
Style the search form using the following CSS styles:
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: url(https://i.pinimg.com/originals/6d/72/ec/6d72ec208bf85647d5e594db79218802.jpg) center center;
background-attachment: fixed;
background-size: cover;
color: #ffffff;
font-family: "Open Sans";
height: 100%;
width: 100%;
}
body input,
body textarea {
border: 1px solid transparent;
border-radius: 3px;
}
#root .container {
margin: 0 auto;
max-width: 1000px;
}
#root .search-outer {
margin: 50px 0 35px;
text-align: center;
}
.main{
padding: 90px;
border-radius: 20px;
background-color: #24243e;
}
#root .search-outer .searchform {
display: inline-block;
position: relative;
left: 0;
right: 0;
}
#root .search-outer .searchform input {
outline: medium none;
}
#root .search-outer .searchform input[type=search] {
background-color: transparent;
border: medium none;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #dadbdb;
border-radius: 0;
box-sizing: content-box;
color: #ffffff;
cursor: pointer;
font-family: inherit;
font-size: 100%;
margin-bottom: 0;
padding: 3px 0;
transition: all 0.5s ease 0s;
max-width: 300px;
width: calc(100% - 15px);
-webkit-appearance: none;
-moz-appearance: none;
/* clears the 'X' from Internet Explorer */
/* clears the 'X' */
}
#root .search-outer .searchform input[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
#root .search-outer .searchform input[type=search]::-ms-clear {
display: none;
width: 0;
height: 0;
}
#root .search-outer .searchform input[type=search]::-ms-reveal {
display: none;
width: 0;
height: 0;
}
#root .search-outer .searchform input[type=search]::-webkit-search-decoration, #root .search-outer .searchform input[type=search]::-webkit-search-cancel-button, #root .search-outer .searchform input[type=search]::-webkit-search-results-button, #root .search-outer .searchform input[type=search]::-webkit-search-results-decoration {
display: none;
}
#root .search-outer .searchform input[type=search]:focus {
background-color: transparent;
color: #fff;
cursor: auto;
padding: 3px 0;
}
#root .search-outer .searchform:hover input[type=search] {
background-color: transparent;
color: #ffffff;
cursor: auto;
padding: 3px 0;
}
#root .search-outer button[type=submit] {
background-color: rgba(0, 0, 0, 0);
border: medium none;
color: #fff;
cursor: pointer;
height: 30px;
line-height: 1;
float: right;
font-size: 1em;
pointer-events: none;
width: auto;
z-index: 1000000000;
}
#root .search-outer .fa-search {
padding-left: 0;
padding-right: 0;
}
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: rgba(255, 255, 255, 0.5);
}
::-moz-placeholder {
/* Firefox 19+ */
color: rgba(255, 255, 255, 0.5);
}
:-ms-input-placeholder {
/* IE 10+ */
color: rgba(255, 255, 255, 0.5);
}
:-moz-placeholder {
/* Firefox 18- */
color: rgba(255, 255, 255, 0.5);
}
.data-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
padding: 0 15px;
}
.data-list:after {
content: "";
}
.data-list:after,
.data-list li {
width: calc(33.33% - 10px);
}
.data-list li {
background: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 15px;
padding: 30px;
}
.data-list li .title {
color: #ffffff;
margin-bottom: 30px;
text-decoration: none;
}
.data-list li .link {
color: #ffffff;
text-decoration: none;
}
@media only screen and (max-width: 768px) {
.data-list:after,
.data-list li {
width: calc(50% - 8px);
}
}
@media only screen and (max-width: 400px) {
.data-list:after,
.data-list li {
width: 100%;
}
}
Load the React JS by adding the following CDN links before closing the body tag:
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js'></script>
Finally, add the following JavaScript function to render and activate the search form.
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}URL = "https://10degrees.uk/wp-json/wp/v2/posts"; // URL variable stores JSON url || API taken from 10 Degrees WordPress Agency
class App extends React.Component {constructor(...args) {super(...args);_defineProperty(this, "state",
{
post: [],
allPosts: [] });_defineProperty(this, "_onKeyUp",
e => {
// filter post list by title using onKeyUp function
const post = this.state.allPosts.filter((item) =>
item.title.rendered.toLowerCase().includes(e.target.value.toLowerCase()));
this.setState({ post });
});}componentDidMount() {axios.get(URL, { headers: { Accept: "application/json", "Content-Type": "application/json" } }).then(({ data }) => {this.setState({ post: data, allPosts: data // array data from JSON stored in these
});}).catch(err => {});}
render() {
return /*#__PURE__*/(
React.createElement("div", { className: "container" }, /*#__PURE__*/
React.createElement("div", { className: "search-outer" }, /*#__PURE__*/
React.createElement("form", {
role: "search",
method: "get",
id: "searchform",
className: "searchform",
action: "" }, /*#__PURE__*/
React.createElement("input", {
type: "search",
onChange: this._onKeyUp,
name: "s",
id: "s",
placeholder: "Search" }), /*#__PURE__*/
React.createElement("button", { type: "submit", id: "searchsubmit" }, /*#__PURE__*/
React.createElement("i", { className: "fa fa-search", "aria-hidden": "true" })))), /*#__PURE__*/
React.createElement("ul", { className: "data-list" },
this.state.post.map((item, index) => /*#__PURE__*/
React.createElement("li", { className: "block-" + index }, /*#__PURE__*/
React.createElement("a", { className: "title", href: item.link }, /*#__PURE__*/
React.createElement("h3", null, item.title.rendered)), /*#__PURE__*/
React.createElement("a", { className: "link", href: item.link }))))));
}}
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("root"));
That’s all! hopefully, you have successfully integrated this search filter component into your project. If you have any questions or suggestions, feel free to comment below.
