How to show data in Autosearch

Question

I want to perform the auto search through ajax call, but I am stuck in showing the result on the search bar. But my search result show in the result.

<input type="text" id="select_link" placeholder="enter the text">

This is my html code

 <script type="text/javascript">
         $(document).ready(function(){       
            $('#select_link').keyup(function(e){
                e.preventDefault();               

                var questionText = document.getElementById("select_link").value;
                var userName= document.getElementById("select_link").value;
                var groupName= document.getElementById("select_link").value;


      var data = {};

      data.questionText = questionText;
      data.userName = userName;
      data.groupName = groupName;


      $.ajax({
        type: 'POST',
        data: JSON.stringify(data),
            contentType: 'application/json',
                    url: 'mastersearch.php',            
                    success: function(data) {
                         alert("JSON" +JSON.stringify(data));
                        $("#select_link").html(data);

                    }
                });     

    </script>

This is my ajax code till my JSON Result it will working fine, but in the HTML result in the search bar it will not show.

Answer 1

You are setting the ajax data using .html() method which is not for setting the value in textbox use .val() method

PLease try below code

<script type="text/javascript">
         $(document).ready(function(){       
            $('#select_link').keyup(function(e){
                e.preventDefault();               

                var questionText = document.getElementById("select_link").value;
                var userName= document.getElementById("select_link").value;
                var groupName= document.getElementById("select_link").value;


      var data = {};

      data.questionText = questionText;
      data.userName = userName;
      data.groupName = groupName;


      $.ajax({
        type: 'POST',
        data: JSON.stringify(data),
            contentType: 'application/json',
                    url: 'mastersearch.php',            
                    success: function(data) {
                         alert("JSON" +JSON.stringify(data));
                        $("#select_link").html(data);

                    }
                });     

    </script>

Note : if data contain JSON value and you are not using JSON.stringify(data) then it' will set value in textbox [Object Object]