CODEWITHSUNDEEP
javascriptjqueryselectclick
Donalda Donalda
Donalda Donalda

Reputation: 99

Pass chosen (clicked) option to input box

I have a bunch of input suggestions but I cant make them be clickable.

<div class="search_native">
    <input type="text" name="native_input" id="native"/>
    <div id='output'></div>
</div>

$(document).ready(function() { 
    $("input").keyup(function(){
        $array = ['usa','france','germany','italy','poland'];
        $input_val = $("input[name='native_input']").val();
        $('#output').text('')
        r = new RegExp($input_val)
        for (i = 0; i < $array.length; i++) {
            if ($array[i].match(r)) {
                $('#output').append('<p class="match">' + $array[i] + '</p>')
            }
        }
    });

    $('.match').click(function(e) {
        alert('df');
    });
});

I try to check if on click of match works, but it doesn't. The alert() doesn't pop up. Why? One more question; if I need to put the value from the clicked option in to an input box can I make something like this for it (when already clicked)?

$value = $(this).val();
$('#native').val() = $value;

Upvotes: 0

Views: 29

Answers (1)

MrCode
MrCode

Reputation: 64526

At the time your $('.match') selector runs, there are no matching elements because this occurs as soon as the page loads.

You can delegate to a parent or the document because this will capute the event after it has bubbled up:

$(document).on('click', '.match', function(){
    alert('df');
    $value = $(this).text();
    $('#native').val($value);
});

The .val() syntax requires the new value as the argument.

Upvotes: 2

Related Questions