JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.12/angular.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="myController">
    <select
        ng-model="selectedFilter"
    
        ng-options="filter as filter.label for filter in options"
            
    ></select>
    <div autocomplete items="items" comparison-type="{{selectedFilter.value}}" min-length="1"><input></input></div>
</div>

CSS

.autocomplete-selected-item
{
    background:#9999ff;
}
input{
    width:200px;
}
.autocomplete-list-item
{
    padding: 0px 10px; 
}
.autocomplete-list
{
    background:#fff;
    border:2px solid #4444aa;
    list-style-type: none;
    padding: 5px 0px; 
    margin: 0;
    width: 200px;
    border-radius: 0px 0px 15px 10px;
}

JavaScript

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

myApp.controller("myController",function($scope){
    $scope.data = "hello world!";
    $scope.items = ["india","pakistan","bangladesh", "united states of america", "united arab emirates","united kingdom"];
    $scope.options = [
        {
            label:"Exact Filter",
            value:"exact"
        },
        {
            label:"Exact Case Sensetive Filter",
            value:"exactCaseSensetive"
        },
        {
            label:"Contains Filter",
            value:"contains"
        },
        {
            label:"Contains Case Sensetive Filter",
            value:"containsCaseSensetive"
        },
        {
            label:"Exact Word Filter",
            value:"exactWord"
        },
        {
            label:"Exact Word Case Sensetive Filter",
            value:"exactWordCaseSensetive"
        }
    ];
    
    $scope.selectedFilter = $scope.options[0];
});

myApp.directive("autocomplete",function($timeout, $filter){
    return {
        scope:{
            items:"="
        },
        transclude:true,
        template:"<div><ng-transclude></ng-transclude>"+
        "<ul class='autocomplete-list' ng-show='isFocused'>" +
        "<li class='autocomplete-list-item' ng-click='itemClicked(item)' ng-class='{true:\"autocomplete-selected-item\"}[$index === selectedIndex]' ng-repeat='item in items | filter:search:filterFunction'>{{item}}</li>" +
        "</ul>" +    
        "</div>",
        link:function(scope, element, attributes){
            //scope.items = ["india","pakistan","bangladesh"];
            scope.selectedIndex = -1;
            var minLength = scope.$eval(attributes["minLength"])?scope.$eval(attributes["minLength"]):1;
            scope.isFocused = false;
            
            attributes.$observe("comparisonType", function(newValue, oldValue){
                if(newValue !== oldValue){
                    if(newValue === "exact"){
                        scope.comparisonType = 1;
       ...