Help with syntax error

JavaScript
1

Hi neebie here to javascript, I been trying to get this code to compile but am running into syntax errors any pointers on how to correct it would be massively appreciated!

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<script type = "text/javascript">

  //Searchbar
  $(document).ready(function() {
    $("#searchbar").on("keyup", function() {
      $.ajax({
        type: "GET",
        url: "links.xml",
        dataType: "xml",
        success: xmlParser
      });
    });
  });

function xmlParser(xml) {
  var searchFor = $("#searchbar").val();
  var reg = new RegExp(searchFor, "i");
  $(xml).find("link").each(function() {
    var title = $(this).find("title").text();
    var titleSearch = title.search(reg);
    $("#xmloutput").empty();
    if (titleSearch > -1) {
      $("#xmloutput").append("<a href=" + $(this).find("href").text +">"+ searchFor.text + "</a>");
    }
  });

 </script>

My html and CSS is fine but am stuggling with this a bit! Basically I’m trying to match the hyperlink to its associated title (found in the links.xml file) as searched for via the html #searchbox, and then output any clickable results to the #xmloutput box on my html page.

The xml file is pretty basic in structure just containing the page title and html page address (all stored in the same local folder as the xml).

<pages>
      <link>
            <title></title>
            <href></href>
      </link>
</pages>
3

Thanks Randell, I still don’t get any output in the <div id=“xmloutput” on keyup from my input form after combining your updates with the html:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" language="javascript">
        $(document).ready(function () {
           $("#searchbar").on("keyup", function(){
            $.ajax({
              type:"GET",
              cache:false,
              url:"‪links.xml",
              datatype: "xml",
              success: xmlParser
            });
           });
         });

        Function xmlParser(xml){
            const searchFor = $("#searchbar").val();
            const reg = new RegExp(searchFor, "i");
            if (searchFor !==''){
              $(xml).find("link").each(function(index,li){
                var[title, href] = $(li).children();
                var foundTitle = reg.test($(title).text());
                if (foundTitle){
                  $("#xmloutput").apend('<a href="$[$href).text()}">${$(title).text()}</a><br>');
                }
              });
            }
        }
    </script>
</head>
<body>
    <input id="searchbar">
        <div id="xmloutput"><p>
        test</p></div>
</body>
</html>
5

Thanks again Randell, noted on case sensitivity, you’ve been really helpful! I’ve just tried it out with the chrome debugger and get this error related to the xml file which is located on a local system folder:

jquery.js:9631 Access to XMLHttpRequest at ‘file:///C:’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Does his mean I can’t store the XML file on our local file structure?