使用JSON和Javascript进行实时搜索，但在控制台中返回重复项检查：insertTimeout

我想在一个页面上实现一个实时搜索，这样在键盘上键入一封信后，建议就会被返回，用户可以单击该建议将他们带到url。我使用了以下代码：

HTML

我尝试了所有的方法，当我在控制台上检查时，它只是计数并显示“检查重复项：insertTimeout”

我还使用了来自另一个站点的代码，并进行了我自己的个性化设置：

<script>
    $('#search').keydown(function()
    {
        $.getJSON("data.json",function(data){
            var search = $('#search').val();
            var regex = new RegExp(search,'i');
            var output;
            $.each(data,function(key,val){
                if((val.url.search(regex) != -1) ||(val.name.search(regex) != -1 )){
                    output += "<tr>";
                    output += "<td id=" + key + ">" + val.cat_id + "</td>";
                    output += "<td id=" + key + ">" + val.title + "</td>";
                    output += "</tr>";
                }
            });

            //console.log(output)
            $('tbody').html(output);
        });
    });
</script>

$（“#搜索”）.keydown（函数（）
{
$.getJSON（“data.json”），函数（数据）{
var search=$（'#search'）.val（）；
var regex=newregexp（搜索，'i'）；
var输出；
$。每个（数据、函数（键、值）{
if（（val.url.search（regex）！=-1）| |（val.name.search（regex）！=-1））{
输出+=“”；
输出+=“”+val.cat_id+“”；
输出+=“”+val.title+“”；
输出+=“”；
}
});
//console.log（输出）
$（'tbody'）.html（输出）；
});
});

第二个代码抛出一个“uncaughttypeerror:无法读取未定义的属性'search' " 我做错了什么。这几天我一直在做这些。 我希望有人能给我一些建议，也许还有解决办法。

---

谢谢

它不是搜索，它必须是

match

，或者更好的是

regex.exec（val.url）

。此外，在第一个函数中使用

$.find（）

，但find用于查找元素的后代。因此，按照编写的方式，您正在DOM中查找不存在的“数据”元素。@RenéDatenschutz您指的是第一个JS代码还是第二个JS代码？如果是，代码应该如何编写。希望阅读you@AndroidNoobie，那么该如何编写该部分呢？很抱歉@AdenijiOlasunkanmi完全监督了它

if（val.url.match（regex））

或

if（regex.exec（val.url））

$(document).ready(function() {
    $('#search').keyup(function () {
        let searchField = $('#search').val();
        //let searchField = document.getElementById('search').val();
        let myExp = new RegExp(searchField, "i");
        $.getJSON('data.json', function (data) {
            let output = '<ul class="searchresults">';
            $(data).find("name").each(function (key, value) {
                var val = value.firstChild.nodeValue;
                if (val.name.search(myExp) !== -1) {
                    output += '<li>' + val.name + '</li>';
                }
            });
            output += '</ul>';
            $('#update').html(output);
        });
    });
});

[
  {
    "name":"Value  ",
    "url": "https://strategyzer.com"
  },
  {
    "name":"Diffusion : The Adoption Curve)",
    "url": "https://www.youtube.com/watch?v=9QnfWhtujPA"
  },
  {
    "name":"Diffusion of Innovation Theory: The \"S\" Curve",
    "url": "https://www.youtube.com/watch?v=NiNoNYLBabA"
  },
  {
      "name":"Junior Officer Trade Back Office",
      "url": "https://www.blockworks.com/junior-officer-trade-back-office-1061443-jv/?source=searchResults&searchType=1&placement=2&sortBy=date"
    },
  {
      "name":"Machine Learning",
      "url": "https://www.blockworks.com/5-machine-learning-1061442-jv/?source=searchResults&searchType=1&placement=3&sortBy=date"
  },
  {
      "name":"Ruby Developers",
      "url": "https://www.blockworks.com/3-ruby-developers-1061441-jv/?source=searchResults&searchType=1&placement=4&sortBy=date"
  },
  {
      "name": "Sales Staff (Losgistic - Salary Attractive)",
      "url": "https://www.blockworks.com/sales-staff-losgistic-salary-attractive-1061440-jv/?source=searchResults&searchType=1&placement=5&sortBy=date"
  },
]

<script>
    $('#search').keydown(function()
    {
        $.getJSON("data.json",function(data){
            var search = $('#search').val();
            var regex = new RegExp(search,'i');
            var output;
            $.each(data,function(key,val){
                if((val.url.search(regex) != -1) ||(val.name.search(regex) != -1 )){
                    output += "<tr>";
                    output += "<td id=" + key + ">" + val.cat_id + "</td>";
                    output += "<td id=" + key + ">" + val.title + "</td>";
                    output += "</tr>";
                }
            });

            //console.log(output)
            $('tbody').html(output);
        });
    });
</script>