JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body ng-app>
<input type="text" ng-model="query"/>
<select ng-model="order">
<option value="username">Organiser par nom</option>
<option value="content">Organiser par contenu</option>
</select>
<div id="example" ng-controller="CommentsCtrl">
<div ng-repeat="comment in comments | filter:{content: query} | orderBy: order">
<p>
<strong>{{comment.username}}</strong><br/>
{{comment.content}}
</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js"></script>
<script>
function CommentsCtrl($scope) {
$scope.comments=[
{
"username": "Geraldine",
"city": "Dola",
"email": "[email protected]",
"content": "Dolor consectetur dolore ut ullamco velit consequat aliquip tempor duis nostrud reprehenderit velit excepteur. Sint enim cupidatat elit occaecat consequat do cupidatat dolor consequat. Aute pariatur nostrud laboris dolore consequat officia exercitation. Non consequat Lorem laborum dolore occaecat non. Anim ut quis commodo tempor aute."
},
{
"username": "Toni",
"city": "Wolcott",
"email": "[email protected]",
"content": "Est sunt proident eu non incididunt proident irure duis irure anim veniam non nisi laboris. Id ex sit tempor adipisicing duis enim nostrud id eu exercitation sit. Ut deserunt elit non adipisicing amet aute mollit fugiat ea ullamco aliquip sint quis culpa. Officia tempor ea elit irure in commodo nostrud eiusmod deserunt mollit mollit. Occaecat excepteur aute sunt elit...