0

I am creating a search box using Flask, MySQL, and ajax. I am getting the JSON format of search results in the console but I want to append it on my option value in datalist in my HTML.

Here is the HTML -

<form class="cours-search">
                            <div class="input-group">
                                <input type="text" class="form-control" id="searchbox" autocomplete="off" placeholder="Search Address, Owner Name   " name="city" list="results">
                                <datalist id="results">
                                <option value="Boston">
                                </datalist>
                                <div class="input-group-append">
                                    <button class="btn" type="submit">Search</button> 
                                </div>
                            </div>
                        </form>

Here is my ajax code -

<script>
    $(document).ready(function(){
        $("#searchbox").on("input", function(e){
            searchtext = $("#searchbox").val();
            
            $.ajax({
                method:"post",
                url:"/searchengine",
                // data:{backendname:valueName}
                data:{text:searchtext},
                success:function(res){
                    console.log(res);
                    //What Should I Do I Don't Know
                }
            })
        });
    })
</script>

Here is the Result Data in Console (in JSON Format) -

0: {address: "Delhi NCR"}
1: {address: "Dhar"}
length: 2
__proto__: Array(0)

I want to add address value in datalist <option> in my HTML . Thank you so much in advance.

Dhruv Arne
  • 113
  • 3
  • 14

1 Answers1

0

To do what you require you can loop over the response from your AJAX request and create the new option elements which contain the text in the address property. Try this:

// inside your AJAX callback:

let res = [{ address: "Delhi NCR" }, { address: "Dhar" }];
let options = res.map(o => `<option value="${o.address}">`);
$('#results').append(options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="cours-search">
  <div class="input-group">
    <input type="text" class="form-control" id="searchbox" autocomplete="off" placeholder="Search Address, Owner Name   " name="city" list="results">
    <datalist id="results">
      <option value="Boston">
    </datalist>
    <div class="input-group-append">
      <button class="btn" type="submit">Search</button>
    </div>
  </div>
</form>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • Your Method Is Working But It's giving duplicates options of response can you please tell me how can i fix it? – Dhruv Arne Feb 02 '21 at 10:49
  • Sure, you can use this to de-dupe a list of objects by property value: https://stackoverflow.com/q/2218999/519413 - better yet, fix the response coming back from the server at `/searchengine` to remove the duplicates there – Rory McCrossan Feb 02 '21 at 10:55
  • Can You Please Write It According To My Code Because I am Beginner I don't understand your referenced answer. Please @RoryMcCrossan – Dhruv Arne Feb 02 '21 at 10:58
  • I'd suggest you start a new question about the deduplication if you're struggling with it, as it wasn't part of the original question above. Remember to include your attempt when writing the new question. – Rory McCrossan Feb 02 '21 at 10:59