primeng grande zone de texte de recherche avec l'icône de recherche

Question

Salut Je suis nouveau à Primeng. J'ai besoin de créer une boîte de recherche comme indiqué dans l'image.

J'ai essayé quelque chose comme ci-dessous, mais ne pas obtenir la sortie désirée.

<div class="ui-g-12"> 
    <input type="text" [(ngModel)]="filterCriteria.searchValue"> 
    <a href="#" class="search-icon"> 
     <i class="fa fa-search" id="myimage" (click)="search()"></i> 
    </a> 
</div> 

Quelqu'un peut-il aider à faire cela dans primeng?

Merci

Answer 1

Like This

<form class="search-container"> 
    <input type="text" id="search-bar" placeholder="What can I help you with today?"> 
    <a href="#" class="search-icon"> 
     <i class="fa fa-search"></i> 
    </a> 
    </form> 

Css

.search-container{ 
    width: 490px; 
    display: block; 
    margin: 0 auto; 
} 

input#search-bar{ 
    margin: 0 auto; 
    width: 100%; 
    height: 45px; 
    border-radius: 5px; 
    padding: 0 20px; 
    font-size: 1rem; 
    border: 1px solid #D0CFCE; 
    outline: none; 
    &:focus{ 
    border: 1px solid #008ABF; 
    transition: 0.35s ease; 
    color: #008ABF; 
    &::-webkit-input-placeholder{ 
     transition: opacity 0.45s ease; 
     opacity: 0; 
    } 
    &::-moz-placeholder { 
     transition: opacity 0.45s ease; 
     opacity: 0; 
    } 
    &:-ms-placeholder { 
    transition: opacity 0.45s ease; 
    opacity: 0; 
    }  
    } 
} 

.search-icon .fa-search{ 
    position: relative; 
    float: right; 
    width: 75px !important; 
    top: -39px; 
    right: -38px; 
    font-size: 30px; 
}