Question

我很难过。第一个输入可以是例如x y z，它表示从tagsinput中提取值。第二个输入可以是例如Alaska使用typeahead。第三个将它们组合起来，例如比利时，但是点击按钮我无法获得countrySelection输入中的值。任何想法？
提前谢谢。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- BootStrap -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- TagsInput -->
    <link rel="stylesheet" href="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">
    <script src="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
    <!-- Typeahead -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
</head>

<body>
    <div class="container">

        <!-- Tagging section -->
        <div id="Tagging" class="row">
            <div class="form-group">
                <div class="col-sm-2">
                    <label for="userTags">Manual Tags:</label>
                </div>
                <div class="col-sm-10">
                    <input type="text" id="userTags" data-role="tagsinput" class="form-control" />
                    <button type="button" class="btn btn-success pull-right"
                            onclick="alert($('#userTags').tagsinput('items'));">Show Tags</button>
                </div>
            </div>
        </div>


        <!-- This typeahead works but is not 'tagged' -->
        <div id="tagOne" class="row">
            <div class="form-group" id="exampleOne">
                <div class="col-sm-2">
                    <label for="stateSelection">TypeAhead Only:</label>
                </div>
                <div class="col-sm-10">
                    <input id="stateSelection" type="text" class="form-control typeahead" />
                    <button type="button" class="btn btn-success pull-right"
                            onclick="alert($('#stateSelection').val());">Show Tags</button>
                </div>
            </div>
        </div>
        <script>
            var states = ['Alabama', 'Alaska', 'Arizona'];
            var myStates = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.whitespace,
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                local: states
            });
            myStates.initialize();

            $('#exampleOne .typeahead').typeahead({
                hint: true,
                highlight: true,
                minLength: 1
            },
                {
                    name: 'states',
                    source: myStates
                });            
        </script>


        <!-- This typeahead works and is 'tagged' but cannot retrieve items -->
        <div id="tagTwo" class="row">
            <div class="form-group">
                <div class="col-sm-2">
                    <label for="countrySelection">TypeAhead with Tags:</label>
                </div>
                <div class="col-sm-10">
                    <div id="exampleTwo">
                        <input type="text" id="countrySelection" data-role="tagsinput" class="form-control" />
                    </div>
                    <button type="button" class="btn btn-success pull-right"
                            onclick="alert($('#countrySelection').tagsinput('items'));">Show Tags</button>
                </div>
            </div>
        </div>
        <script>
            var countries = ['Belgium', 'Finland', 'New Zealand'];
            var myCountries = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.whitespace,
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                local: countries
            });
            myCountries.initialize();

            $('#exampleTwo').tagsinput({
                typeaheadjs: ({
                    hint: true,
                    highlight: true,
                    minLength: 1,
                    name: 'countries',
                    source: myCountries
                })
            });
        </script>

    </div>
</body>
</html>

Answer 1

想出来......正在使用错误的ID。更改为适当的代码

alert($('#exampleTwo').tagsinput('items'))

一切都很好。干杯

使用typeahead从tagsinput检索值

1 个答案: