CODEWITHSUNDEEP
javascriptjqueryautocomplete
seph
seph

Reputation: 694

Populate hiddenfield after autocomplete

I'm trying to populate the value of a hiddenfield after the user clicked on an autocomplete-entry.
The code I tried looks like this:

<input type=hidden id="myHiddenField" value="">

<script type="text/javascript">
    function selectItem(li) {
        return false;
    }
    function formatItem(row) {
        return row[0] + "<br><i>" + row[1] + "</i>";
    }
    $(document).ready(function () {
        $("#myInputField").autocomplete("../test.asp", {
            minChars: 3,
            matchSubset: 10,
            matchContains: 1,
            cacheLength: 10,
            onItemSelect: selectItem,
            formatItem: formatItem,
            selectOnly: 1,

            select: function (event, ui) {
                $("#myHiddenField").val(ui.item.value)
            }


        });
    });
</script>

The autocomplete is working fine, but I am not able to set the value of my hidden-field. I also tried to set it to a normal string like this $("#myHiddenField").val("test"), but that didn't work either.

Any idea how to populate it?

This is the autocomplete I am using: pastebin-link
And here is a JSFiddle, which is not working properly although.
Autocomplete source: Github-link. (Note: In this case, I have to use this autocomplete-script, I am not able to use the newer ones.)

Upvotes: 0

Views: 220

Answers (1)

H&#252;seyin BABAL
H&#252;seyin BABAL

Reputation: 15550

I have solution like this;

function selectItem(li) {
    return false;
}

function formatItem(row) {
    return row[0] + "<br><i>" + row[1] + "</i>";
}
$(document).ready(function () {
    var programmingLanguages = [
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"

    ];
    $(".autocomplete").autocomplete({
        source: programmingLanguages ,
        minChars: 3,
        matchSubset: 10,
        matchContains: 1,
        cacheLength: 10,
        onItemSelect: selectItem,
        formatItem: formatItem,
        selectOnly: 1,

        select: function (event, ui) {
            $("#hfieldvisible").val(ui.item.value)
        }


    });
});

I have added source param to autocomplete. And I have also added one item to HTML 

<input type="text" id="hfieldvisible" value="">

in order to show you that it is adding selected item to that input.

Here is working example: http://jsfiddle.net/6S46E/

Updated (JSON remote): You can json remote version here http://jsfiddle.net/u5beu/1/

Upvotes: 1

Related Questions