javascript - Trying to access dynamically generated input fields and compare it to comforming length .json data -
javascript - Trying to access dynamically generated input fields and compare it to comforming length .json data -
i'm writing code i've dynamically generated html input fields via loop conforms length of info in .json file. i'd create when types text input field, jquery scan through particular .json category input fields equal length of, in effort compare 2 see if there matches. seemed simple plenty thing do, i've run problems. i'm trying access dynamically created html via loop , extract whatever user types in , compare .json data. if has helpful ideas i'd appreciate it. give thanks you.
my .js file looks this:
$.getjson('rote.json', function(data){ var rand = data[math.floor(math.random() * data.length)]; var randcat = rand.cat; var randmem = rand.members; var randmeml = randmem.length; $("h2").html(randcat); var output = ''; (var i=0;i<randmeml;i++){ output += '<input type="text" class="input" placeholder="write tag here" /><br>'; } $('.fields').html(output); $('.input').keyup(function(){ //...what now? }); }); });
my .json file looks this:
[ { "cat": "list html tags begin letter 'a'", "members": [ "a", "abbr", "address", "article", "area", "aside", "audio" ] }, { "cat": "list html tags begin letter 'b'", "members": [ "base", "bdo", "blockquote", "body", "br", "base", "base" ] }, { "cat": "list html tags begin letter 'c'", "members": [ "canvas", "caption", "cite", "col", "colgroup", "canvas" ] }, { "cat": "list html tags begin letter 'd'", "members": [ "dd", "del", "div", "dl", "dt" ] }, { "cat": "list html tags begin letter 'e'", "members": [ "em", "embed" ] }, { "cat": "list html tags begin letter 'f'", "members": [ "fieldset", "figcaption", "figure", "footer", "form" ] }, { "cat": "list html tags begin letter 'g'", "members": [ ] }, { "cat": "list html tags begin letter 'h'", "members": [ "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html" ] }, { "cat": "list html tags begin letter 'i'", "members": [ "i", "iframe", "img", "input", "ins" ] }, { "cat": "list html tags begin letter 'j'", "members": [ ] }, { "cat": "list html tags begin letter 'k'", "members": [ "kbd" ] }, { "cat": "list html tags begin letter 'l'", "members": [ "label", "legend", "li", "link" ] }, { "cat": "list html tags begin letter 'm'", "members": [ "map", "mark", "meta" ] }, { "cat": "list html tags begin letter 'n'", "members": [ "nav", "noscript" ] }, { "cat": "list html tags begin letter 'o'", "members": [ "object", "ol", "optgroup", "option" ] }, { "cat": "list html tags begin letter 'p'", "members": [ "p", "param", "pre", "progress" ] }, { "cat": "list html tags begin letter 'q'", "members": [ "q" ] }, { "cat": "list html tags begin letter 'r'", "members": [ ] }, { "cat": "list html tags begin letter 's'", "members": [ "s", "samp", "script", "section", "select", "small", "source", "span", "style", "strong", "sub", "summary", "sup" ] }, { "cat": "list html tags begin letter 't'", "members": [ "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track" ] }, { "cat": "list html tags begin letter 'u'", "members": [ "u", "ul" ] }, { "cat": "list html tags begin letter 'v'", "members": [ "var", "video" ] }, { "cat": "list html tags begin letter 'w'", "members": [ ] }, { "cat": "list html tags begin letter 'x'", "members": [ ] }, { "cat": "list html tags begin letter 'y'", "members": [ ] }, { "cat": "list html tags begin letter 'z'", "members": [ ] } ]
the html pretty simple:
<!doctype html> <html lang="en"> <head> <title>rote-app</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <!-- <link rel="stylesheet" href="rote.css"> --> </head> <body> <div id="searcharea"> <h2></h2> <div class="fields"></div> </div> <div id="update"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="rote.js"></script> </body> </html>
using lodash, start :
$('.input').keyup(function () { var reply = this.value, index = _.findindex(randmem, function (tag) { homecoming reply == tag; }); console.log(index); }); javascript jquery json
Comments
Post a Comment