JSFiddle - React, Tailwind, and code Playground

by techunter

HTML

<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<form>
    <input id="search" type="text" name="search" />
</form>
<div id="info"></div>
<div id="other">Trigger the handler</div>
<select id="searchSelectTarget"></select>

JavaScript

$('#search').change(function () {

    var search = $('#search').val();

    if (search.length > 2) {
        console.log(search);
        var $select = $('#searchSelectTarget').empty(); //just to reset the content
        $.ajax({
            type: "POST",
            url: "/echo/json/",
            cache: false,
            data: {
                search: $("#search").val(), //here in echo request it's useless
                json: $.toJSON({array:['opt1', 'opt2']}), //the object echo will return for this ajax, to convert JSON i used a json lib in external resources
            },
            success: function (response) {
                $.each(response.array, function (index, value) {
                    $('<option />', {
                        value: value,
                        text: value
                    }).appendTo($select);
                });
                //    s.appendTo('body'); this one would have moved here but you don't need it anymore
            },
            error: function (e) {
                alert('Error: ' + e);
            }

        });
    }


});