时间戳

首页 > 解决方案 > 放在js文件中时功能不起作用

javascript - 放在js文件中时功能不起作用

问题描述

嗨，当我将代码包含在我的 html 中时，这是有效的，但是当我将其移出 myScript.js 时，我没有得到任何结果，任何人都可以指出我在哪里出了问题，因为我希望能够访问这个功能跨越几个页面？

我还有一个附带问题，如果我输入一些内容，然后删除输入值，我的过滤数组会显示所有选项，如果输入框不包含任何值，是否可以将其设置为“”值？

谢谢

    function page_search(){
    	var pages = [
    	{name: "Test",url: "Test.html"},
    	{name: "Rest",url: "Rest.html"},
    	{name: "Best",url: "Best.html"},    	
    	];
    	
    	let input = document.getElementById('searchbar').value 
    	input=input.toLowerCase();
    	let x = document.getElementById('searchresults');
    	var results = [];
    		for(var i=0;i<pages.length;i++){
    			if(pages[i].name.toLowerCase().indexOf(input) > -1)
    				results.push("<a href='"+pages[i].url+"' target='_blank'>"+pages[i].name+"</a>")
    		}
    			if(results.length == 0)
    				$(x).html("No Results Found");
    			else
    				$(x).html(results.join("<br>"));
    	return results;
    }
    <html>
    <head>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="myScript.js"></script>
    </head>
    <body>
    <div class="searchbar">
       <input type="text" id="searchbar" onkeyup="page_search()" placeholder="" value="Search.." maxlenght="25" autocomplete="off"/>
    </div>
    <div  id="searchresults"></div>
    </body>
    </html>

标签： javascript

解决方案

我已经添加了代码，它肯定会解决您在输入框为空时显示“”的第二个问题。我无法复制你的第一个问题，你能告诉你遇到了什么错误吗？

function page_search() {
  var pages = [{
      name: "Test",
      url: "Test.html"
    },
    {
      name: "Rest",
      url: "Rest.html"
    },
    {
      name: "Best",
      url: "Best.html"
    },
  ];

  let input = $('#searchbar').val().toLowerCase()
  let x = $('#searchresults');
  var results = [];
  if (input) {
    for (var i = 0; i < pages.length; i++) {
      if (pages[i].name.toLowerCase().indexOf(input) > -1) {
        results.push(`<a href="${pages[i].url}" target="_blank">${pages[i].name}</a>`);
      }
    }
  } else {
    $(x).html("");
    return;
  }
  if (results.length == 0)
    $(x).html("No Results Found");
  else
    $(x).html(results.join("<br>"));
}

var ele = document.getElementById('searchbar');
ele.addEventListener('keyup', page_search);
<html>

<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
  <div class="searchbarC">
    <input type="text" id="searchbar" placeholder="Search.." maxlenght="25" />
  </div>
  <div id="searchresults"></div>
	<script src="myScript.js" type="text/javascript"></script>
</body>

</html>

推荐阅读