JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.angularjs.org/0.9.15/angular-0.9.15.min.js" ng:autobind></script>
<br/>
Search a tag
<br/>
<div ng:controller="TagSearchCtrl" class="main">
<input type='text' placeholder='Search for tag...' name='input'>
{{debug}}
<div class="option-list">
<ul>
<li ng:repeat="tag in tags" class="option" style='display: {{tag.display}}' ng:click="add(this)">{{tag.text}}</li>
</ul>
</div>
<br/>
<br/>
Tag list
<br/>
<div ng:controller="TagListCtrl">
<div ng:repeat="tag in tags" class="item">
{{tag.text}}
</div>
</div>
CSS
body {font-family: sans-serif;}
.option-list {position:absolute;}
.option { color: grey; padding: 3px; border: thin solid lightgrey; cursor: pointer; font-size: small; background-color: white; }
.option:hover { background-color: #eee; }
JavaScript
function TagListCtrl() {
var scope = this;
scope.tags = [
{ id: 0, text: 'one'},
{ id: 1, text: 'two'},
{ id: 2, text: 'three'},
{ id: 3, text: 'four'}
];
scope.add = function (tag) {
tags.push(tag);
};
};
function TagSearchCtrl() {
var scope = this;
scope.input = "";
scope.debug = "";
scope.tags = [
{
id: 1,
text: "tv",
display: 'none'},
{
id: 2,
text: "casaco",
display: 'none' },
{
id: 3,
text: "gabardine",
display: 'none' }
];
scope.search = function (str) {
if (str == '') {
scope.reset();
return;
}
for (i in scope.tags) {
if (scope.tags[i].text.indexOf(str) >= 0) {
scope.tags[i].display = '';
} else {
scope.tags[i].display = 'none';
}
}
};
scope.reset = function () {
for (i in scope.tags) {
scope.tags[i].display = 'none';
}
};
scope.$watch('input', function(newValue, oldValue) {
scope.debug = newValue;
scope.search(newValue);
});
scope.add = function (e) {
console.log(e.tag);
for (key in TagListCtrl()) {
console.log(key);
console.log(TagListCtrl[key]);
}
};
}