用输入搜索json

作者: 银环蛇
发布时间: 2024-06-26 11:53:54 (20天前)
转自：

3 条回复

0#
回复此人
晴天3 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以使用 <code> Object.values </code> </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> var dataArr = [{ "json1": { "car": "honda", "id": "0123", "name": "jim" }, "json2": { "car": "toyota", "id": "0124", "name": "james" } }]; $("#search").on('keypress keyup change input', function() { var arrival = $(this).val().toLowerCase(); let filterVal = filteredVal(arrival); let car = filterVal[0] ? filterVal[0].car : '' $('#matches').text(!arrival.length ? '' : car); }) function filteredVal(searchedName) { let getKeys = Object.values(dataArr[0]).filter(function(elem) { return elem.car == searchedName; }); return getKeys; } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="search" type="text" placeholder="Search term"> <div id="matches" style="height:70px; overflow-y:hidden; white-space:pre"></div> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
1#
回复此人
Jacob | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 只需将第一个代码段数组转换为第二个代码段数组。运用 <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Object/values" rel="nofollow noreferrer"> <code> Object.values() </code> </A> </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> var dataArr = [{ "json1": { "car": "honda", "id": "0123", "name": "jim" }, "json2": { "car": "toyota", "id": "0124", "name": "james" } }]; dataArr = Object.values(dataArr[0]); $("#search").on('keypress keyup change input', function() { var arrival = $(this).val().toLowerCase(); $('#matches').text(!arrival.length ? '' : dataArr.filter(function(place) { return (place.name.toLowerCase().indexOf(arrival) !== -1); }).map(function(place) { return place.name; }).join('\n')) }); </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <b>this does not work. because i have parent names for my json structure</b> <input id="search" type="text" placeholder="Search term"> <div id="matches" style="height:70px; overflow-y:hidden; white-space:pre"></div> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑

登录后才能参与评论