Question

在此函数中，来自users数组的数据按输入值mySearch搜索。包含搜索词的行将输出到return。

数据：

var users = [{"username":"nlee6p","gender":"Female","sexuality":"Down-sized asymmetric time-frame","language":"Macedonian"},
{"username":"bbrooks6q","gender":"Male","sexuality":"Multi-channelled mobile customer loyalty","language":"Luxembourgish"},{"username":"astephens6r","email":"lmiller6r@ucoz.com","gender":"Female","language":"Estonian"}]


function myFunction(e) {
    if((e.target.id === 'mySearch' && e.keyCode === 13) || e.target.id === 'searchButton'){
        e.preventDefault();
        var searchValue = document.getElementById("mySearch").value;
        for(var i = 0; i < users.length; i++){
        if((users[i]['last_name'] === searchValue) || (users[i]['username'] === searchValue) || (users[i]['first_name'] === searchValue)){
        document.getElementById("return").innerHTML = JSON.stringify(users[i]);
        return;
       }  
    }
  }
}

HTML

<input type="search" id="mySearch"  onkeypress="myFunction(event)"/>
<button id="searchButton" onClick="myFunction(event)">SEARCH</button>

<div id="return">
    <div id="usernameOut">
    </div>
    <div id="firstNameOut"> 
    </div>
</div><!--return-->

我的问题

是否可以在没有jQuery的情况下在单个div中输出字符串化数据？目前，输出是与搜索项有关的数组的整行。我正在寻找一种分割线的方法，并在各自的div标签中显示各个组件（如果更容易，则在表格中显示）

例如，当输出字符串时，username值将显示在usernameOut中的first-name，firstNameOut等中。

我过去曾使用Jput，但这是针对通过C＃应用程序本地显示的页面而在C＃中编译jQuery有点噩梦。

使用vanilla JS的答案很受欢迎，但如果唯一的方法是通过jQuery那么我就不会太讨厌。

JsFiddle (that doesn't work for some reason)

（对不起，如果不清楚，我会根据需要进行编辑）

Answer 1

~~这是工作小提琴：~~

https://jsfiddle.net/zfywyyfj/2/

no changes were made to the code, just reposition.

您将其设置为仅在完全相等时显示，因此您必须输入整个内容以使其转储json字符串。

~~此外，我将JS脚本移动到头部，因为否则它将在定义之前被调用。~~这是Shilly指出的小提琴问题。

更新：该错误是因为您尝试获取 last_name 和 first_name ，而users array / object没有它。这是工作片段，我也编辑它以允许部分。

var users = [{"username":"nlee6p","gender":"Female","sexuality":"Down-sized asymmetric time-frame","language":"Macedonian"},{"username":"bbrooks6q","gender":"Male","sexuality":"Multi-channelled mobile customer loyalty","language":"Luxembourgish"},{"username":"astephens6r","email":"lmiller6r@ucoz.com","gender":"Female","language":"Estonian"},{"username":"rbishop84","gender":"Female","sexuality":"Centralized hybrid data-warehouse","language":"Amharic"},{"username":"wmorrison85","gender":"Male","sexuality":"Extended upward-trending throughput","language":"Aymara"}];

function myFunction(e){
  if((e.target.id === 'mySearch' && e.keyCode === 13) || e.target.id === 'searchButton') {
    e.preventDefault();
    var searchValue = document.getElementById("mySearch").value;
    for(var i = 0; i < users.length; i++) {
      if( ( users[i]['language'].includes(searchValue) ) || ( users[i]['username'].includes(searchValue) ) || ( users[i]['sexuality'].includes(searchValue) ) ) {
        document.getElementById("return").innerHTML = JSON.stringify(users[i]);
        return;
      }
    }
  }
}

<input type="search" id="mySearch" onkeypress="myFunction(event)"/>
<button id="searchButton" onClick="myFunction(event)">SEARCH</button>

<div id="return">
</div>

将字符串化的JSON数据输出到单独的div中

1 个答案: