How do I get multiple results when I search a js object?
Hello,
I have this script to list movie titles. At the moment it only shows 1 result, the search term has to be exact and if nothing is found the old value reamins.
Here's What I have.
Html:
- <form id="form">
<h3>Movie Search</h3>
<input id="moviename" type="text">
<button class="btn" type="button" id="go">Search</button>
<div id="placeHolder"></div>
</form>
Jquery:
- $(function() {
var data = {
"movies": [{
"title": "Aeroplane"
},{
"title": "Back to the future"
},{
"title": "Rocky"
}, {
"title": "Rambo"
}, {
"title": "Rambotwo"
}, {
"title": "Rambothree"
}]
};
/* ======== END OF DB ========= */
var getProperties = function(title) {
return data.movies.filter(function(elem) {
var expType = title.indexOf(elem.title) >= 0;
return expType
});
}
$("#go").click(function() {
var title = $("#moviename").val();
var properties = getProperties(title);
for( var i=0; i<properties.length; i++){
$("#placeHolder").html(properties[i].title);
}
});
});
I also have a
jsfiddle if that helps.
I would like it to:
1 start showing results as soon as I start typing
2 display all titles that match
3 match any part of the title, not just exact matches
4 case insensitive
5 display nothing if no results are found
This is for a personal project totally local with no server.
I hope this isn't too much to ask. Thank you for any help.