Live search AJAX without JQUERY

I am trying to do a live search using AJAX, but without JQUERY. I have set up my route, controller, and view. Need some help with the next steps I should be taking. I have it spitting out json data and also have a javascript file calling to the method

    $users = DB::select('SELECT * FROM users');
    return Response::json($users);
 }

Route
Route::get('welcome' ,'CharacterController@search');

<body>
        <div class="container">
            <div class="content">
                <div class="title">Game of Thrones Directory</div>
                    <h1> Game of Thrones Directory </h1>
                         <form>
                <label for="searchbox">Search:</label>
                <input type="text" name="search" id="searchbox" placeholder="Start your search here">
            </form>
            <div id="txtHint">Search Results here.</div>
            <div id="maindiv"></div>
            </div>
        </div>
    </body>

mturner20

9 years ago

Level 1

OK i was following it and it didnt work

(function() {
    "use strict";

    var request; 
    var content = document.querySelector("#users");
    var info = document.querySelector("#info");


    function showUsers() {

        request = createRequest();//goes into utils.js to create the subway car
        if (request==null) {
            alert("You are using a outdated browser");
            return;
        }
        var url = "http://localhost:8888/fullstack/public/search";
        //no external procedural php file.
        request.onreadystatechange=stateChangedList;
        request.open("GET", url, true);
        request.send(null);

    }

    function stateChangedList() {
        if(request.readyState===4 || request.readyState=="complete"){
            createList(request);
        }
    }

    function createList(request){
        var jsondoc = JSON.parse(request.responseText);
         //console.log(jsondoc);
        //console.log(jsondoc[0].name);
        for (var i=0; i < jsondoc.length; i++) {
            content.innerHTML += '<li><a href="#" data-charid="'+jsondoc[i].id+'">'+jsondoc[i].name+' </a></li>';
        }
        
        var anchors = content.querySelectorAll("a");
        
        for (var i=0; i < anchors.length; i++) {
            anchors[i].addEventListener("click",charInfo,false);
        }
    }

    function charInfo(e) {
        console.log(e.currentTarget.dataset.charid);

        e.preventDefault();
        
        var id = e.currentTarget.dataset.charid;

        request = createRequest();

        if (request==null) {
            alert("You are using a outdated browser");
            return;
        }

        var url = "http://localhost:8888/fullstack/public/search"+id+"";
        request.onreadystatechange=stateChangedInfo;//function below
        request.open("GET", url, true);
        request.send(null);
    }

    function stateChangedInfo() {
        if(request.readyState===4 || request.readyState=="complete"){
            showInfo(request);
    }
    
    }

    function showInfo(request) {
        var jsondoc = JSON.parse(request.responseText);
        //console.log(jsondoc);

        info.innerHTML=
        '<img src="images/'+jsondoc.avatars+'">'+
        "<h2>"+jsondoc.name+"</h2>";
    }


    showUsers();//need to call the function

})();```