html
html
xxxxxxxxxx<!DOCTYPE html><html ng-app="myApp"><head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <style> .search-container { position: relative; display: inline-block; } .search-input { padding-right: 25px; } .clear-icon { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); cursor: pointer; } </style></head><body ng-controller="myController"> <div class="search-container"> <input type="text" ng-model="searchText" class="search-input" placeholder="Search..."> <span class="clear-icon" ng-click="clearSearch()">X</span> </div> <ul> <li ng-repeat="item in filteredList">{{item.name}}</li> </ul> <script> var app = angular.module('myApp', []); app.controller('myController', function ($scope) { // Sample data $scope.list = [ { name: 'Item 1' }, { name: 'Item 2' }, { name: 'Item 3' }, // Add more items as needed ]; $scope.filteredList = angular.copy($scope.list); $scope.clearSearch = function () { $scope.searchText = ''; $scope.filteredList = angular.copy($scope.list); }; $scope.$watch('searchText', function (newVal, oldVal) { if (newVal !== oldVal) { // Filter the list based on the search text $scope.filteredList = $scope.list.filter(function (item) { return item.name.toLowerCase().includes($scope.searchText.toLowerCase()); }); } }); }); </script></body></html>Source: chat.openai.com
Twitter 
LinkedIn