Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
482 views
in Technique[技术] by (71.8m points)

javascript - JQuery autocomplete how to write label in autocomplete text input?

Hello I am using jQuery UI autocomplete.

I am getting values and labels from the drop down area. I will write the value in a hidden input and use it later. I could do that, but I cannot write the label in the search input, after the select item. When I select a row in the dropdown box, the value of the row is displayed in the search area (#tags), but I want the label in there.

Here is my code: Thanks

<html>
    <head>
        <script>
        $(document).ready(function () {
            var selectedLabel = null;
            var yerler = [
                { "value": 3, "label": "Adana Seyhan" }, 
                { "value": 78, "label": "Seyhan Adana" },
                { "value": 17, "label": "Paris Fransa" }, 
                { "value": 123, "label": "Tokyo Japan"}
            ];

            $("#tags").autocomplete({
                source: yerler,
                select: function (event, ui) {
                    $("#projeKatmanRaporCbx").val(ui.item.value);
                    $("#tags").val(ui.item.label);
                }
            });    
        });
        </script>
    </head>
    <body>
        <div class="ui-widget">
            <label for="tags">Tags: </label>
            <input id="tags" />
            <input type="text" id="projeKatmanRaporCbx" />
        </div>
    </body>
</html>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Adding a return false (or event.preventDefault) in the select event solves half of your problem. The remaining problem can be solved by adding a focus event:

$("#tags").autocomplete({
    source: yerler,
    focus: function (event, ui) {
        event.preventDefault();
        $("#tags").val(ui.item.label);
    },
    select: function (event, ui) {
        event.preventDefault();
        $("#projeKatmanRaporCbx").val(ui.item.value);
        $("#tags").val(ui.item.label);
    }
});

Demo here


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...