How can I display the results of a users' search/query in HTML/UI?-CodePudding

I want to return the results of the users’ search in HTML. The results will vary depending on what value they type in. How can I get my code to display the data from whatever the value of {NameOfData} is?

Myscript.js

function GetData(e){
    const nameOfData = e.target.value; 
    const url = `http://container:8004/v1/data/${nameOfData}`;
    //http request
    fetch(url,)
.then(res => res.json())
.then (json => console.log(JSON.stringify(json)))



const input = document.getElementById("input");

input.addEventListener("change", GetData);

Index.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


</head>
<body>
    
<form id="form" role="search">
    <input type="search" id="input" name="q" placeholder="Search Entities...">
    <button>Search</button>
  </form>   

<script src="myScript.js"> </script>

</body>

</html>

CodePudding user response：

index.html


<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        />
    </head>
    <body>
        <form id="form" role="search">
            <input
                type="search"
                id="input"
                name="q"
                placeholder="Search Entities..."
            />
            <!-- button>Search</button -->
        </form>

        <div>
            <ul style="list-style: none" id="results"></ul>
        </div>

        <script src="yourScript.js"></script>
    </body>
</html>

yourScript.js


const createAndAppendDOM = (DOMChild, objDOMParameters, parent) => {
    // argument -> objDOMParameters must be object with parameters of HTML tag -> example { id: 'myId', textContent: 'example' }
    const DOMCreated = document.createElement(DOMChild);
    if(Object.keys(objDOMParameters).length === 0 ) {
        return {
            created: false,
            error: "Object is empty" 
        };
    }else {
        for(let parameter in objDOMParameters) {
            DOMCreated[parameter] = objDOMParameters[parameter];
        }
    }
    parent.appendChild(DOMCreated);
}

function GetData(e) {
    e.preventDefault();
    const nameOfData = e.target.value; 
    
    //const url = `http://container:8004/v1/data/${nameOfData}`;
    const url = "https://my-json-server.typicode.com/typicode/demo/posts";
    //http request
    fetch(URL)
      .then(res => res.json())
        .then(
            json => {
                //console.log(json);
                json.forEach(element => {
                        createAndAppendDOM('li', { textContent: ` ${element['title']} ` }, results);
                });
        })
}

// I don't know what for you have button tag and what for if you have listener - change - to input
// its not make sense
// so what do you want to do add listener to button - click - for submit? 
// If you want to use listener like - change - so you maybe delete button in you HTML code, because your code will execute when you escape from input tag
const results = document.querySelector("ul");
console.log(results);
const input = document.querySelector("input");
input.addEventListener("change", GetData);

CodePudding user response：

Change this line

input.addEventListener("change", GetData);

button.addEventListener("click", GetData);

and add to your function just as first line below body function

e.preventDefault()