I am looking to develop a search box using AngularJS similar to the one shown in the image. While I am familiar with creating a normal text box, I am unsure of how to incorporate the search icon. Any guidance on how to achieve this would be greatly appreciated. Thank you.
This is an example utilizing CSS, remember to utilize font-awesome for the search icon
Click here for Font Awesome stylesheet
To learn more about ng-repeat, visit this link
Check out the code on JSFiddle
* {
box-sizing: border-box;
}
html,
body {
font-size: 12px;
}
input {
border: 1px solid #ccc;
font-size: 12px;
height: 30px;
padding: 4px 8px;
position: absolute;
width: 50%;
}
input:focus {
outline: none;
}
button {
text-align: center;
}
button:focus {
outline: none;
}
button.btn-search, button.btn-reset {
background: #568683;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
width: 30px;
}
.sample {
float: left;
height: 50px;
margin: 0 8%;
position: relative;
width: 34%;
}
.sample.ten input {
border-radius: 15px;
transition: all .6s ease-in-out .3s;
width: 120px;
}
.sample.ten input:focus {
transition-delay: 0;
width: 200px;
}
.sample.ten input:focus ~ button {
transform: rotateZ(360deg);
}
.sample.ten input:focus ~ button.btn-search {
background: #568683;
color: #fff;
left: 172px;
transition-delay: 0;
}
.sample.ten input:focus ~ button.btn-reset {
left: 202px;
transition-delay: .3s;
}
.sample.ten button {
transition: all .6s ease-in-out;
}
.sample.ten button.btn-search {
background: #ccc;
border-radius: 50%;
height: 26px;
left: 92px;
top: 2px;
transition-delay: .3s;
width: 26px;
}
.sample.ten button.btn-reset {
background: #fff;
border: 1px solid #ccc;
border-radius: 50%;
font-size: 10px;
height: 20px;
left: 92px;
line-height: 20px;
padding: 0;
top: 5px;
width: 20px;
z-index: -1;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
angular.module('sample', [])
.controller('sampleController', ['$scope', function($scope) {
$scope.users = [
{
firstname: 'John'
},
{
firstname: 'Jack'
}];
}]);
</script>
<div ng-app="sample" >
<div class="sample ten">
<input type="text" name="search" ng-model="search.$" placeholder="search">
<button type="submit" class="btn btn-search">
<i class="fa fa-search"></i>
</button>
<button type="reset" class="btn btn-reset fa fa-times"></button>
</div>
<br>
<table ng-controller="sampleController">
<thead>
<tr>
<th>Users</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter:search">
<td>{{user.firstname}}</td>
</tr>
</tbody>
</table>
</div>Let's create a simple HTML structure with an input field and an image of an icon inside a div.
<div>
<input id="searchInput" ng-model="searchText"></input>
<img src="https://image.freepik.com/free-icon/zoom-or-search-tool_318-34054.png"/>
</div>
You can now use the value entered in the input field to filter your ng-repeat content.
<div ng-repeat="product in products | filter:searchText">
I'm looking to customize the underline style when hovering over a link. Specifically, I want to change the color and size of the underlined link. const useStyles = makeStyles(theme => ({ button: { marginLeft: theme.spacing(2), }, }) ...
I have a JavaScript file and a stylesheet that I am trying to link in order to use a cipher website that I created. Here is my File Path: website/ (contains app.js/html files and package json) website/public/css (contains CSS files) website/public/scri ...
I am trying to implement a drop-down list with bullets using Angular 2, JavaScript, and CSS. Although I have managed to create the drop-down list, I am facing difficulty in adding bullets to the list items. Unfortunately, I have found that jQuery and Boot ...
How do I apply a stroke only to the right and left sides of an SVG (specifically a wave SVG)? <svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="wave"> <svg viewBox="0 0 100 50" ...
After referencing a tutorial, I implemented the following code: <div class="card" style="width:400px"> <img class="card-img-top" src="image.png" alt="Card image"> <div class="card-body"> <h4 class="card-title">John Doe</ ...
My website focuses on online magazines. I'm looking for a way to selectively display specific parts of articles that are in regular HTML format with a global CSS stylesheet applied. There are no images, only text. How can I extract certain segments of ...
Is there a way in PHP to extract the current active colors of specific elements like #wpadminbar or #adminmenu .wp-submenu from the admin page for my plugin? I am not interested in getting the schema names (base, focus, current)! Here is an example code s ...
Is there a way to smoothly slide a div left and right using jQuery animation? I have been trying to achieve this by implementing the code below, which can be found in this fiddle. The issue I am facing is that every time I click on the left or right butto ...
I recently built a calculator using HTML, CSS, and JavaScript. It works perfectly on PC or big screens, but when viewed on smaller devices like phones or tablets, the display gets cut off and does not adjust properly. Here are some example pictures for ref ...
Seeking to enhance logo/image size when cursor hovers over it, but facing an issue where it enlarges even on areas outside of the image itself - View Example. I followed a tutorial to achieve this effect, and specified the width as 1024x1024 for the logo/i ...
I want to change the z-index of 3 divs by toggling them using jQuery, but I'm not sure how to do it. What I want is to click a button that relates to a specific div and increase the z-index of that div so the content inside it is shown. Currently, all ...
I am currently utilizing Bootstrap 3.0 and hoping to achieve a layout similar to this: Favorites Add I want the "Favorites" text to be aligned on the left and enclosed in an H3 tag, while the "Add" link is aligned on the right within an anc ...
It's quite puzzling as to why the weight of my Google web font in the navigation menu keeps changing on different pages even though I have specifically set it to 700. The CSS for the menu is exactly the same across all pages. Can anyone shed some ligh ...
I have been working on a personal project where I added thumbnails for images that can be scrolled through and clicked to set the main image. However, I encountered a strange issue. To demonstrate the problem, I created a Stackblitz project here: https:// ...
I have a pair of images on my webpage that I've aligned next to each other. To enhance the mobile user experience, I want these two images to stack on top of each other when viewed on smaller screens. If anyone can provide guidance on creating respon ...
Can you explain the distinction between serif and sans-serif when it comes to the CSS font-family attribute? ...
I've been struggling to eliminate the gap between the top of my webpage and the <div> element. Here's the code snippet causing the issue: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="v ...
Is there a specific limit to the CSS property z-index? Are there variations in accepted values among different browsers? How do browsers typically handle extreme z-index values? I recall reading about a potential maximum value for z-index somewhere, but I ...
Here is the HTML code that I am currently working with: <div class="item"> <div class="pageheader"> Header </div> <div class="info"> Created on... </div> <div class="image"> I ...
Is it possible to dynamically set the text color of a list item based on the class name of its nested span element? For example, if the span has a class of "green", the text color of the parent li should also be green. How can this be achieved? Demo:https ...