Bootbox 中的 Typeahead

Question

我无法在 Bootbox 中初始化 Bootstrap Typeahead。我试图设置 z-index，但也许我做错了。

这是基本示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body>

<a href="#bootbox" onclick="show_bootbox()" class="btn btn-lg btn-danger">Show Bootbox</a>

<script>
    
    function show_bootbox() {

        var form = $('<div id="the-basics">' +
                '<input class="typeahead" type="text" placeholder="States of USA">' +
                '</div>');

        bootbox.dialog({
            message: form,
            title: "Example",
            buttons: {
                success: {
                    label: "Ok",
                    className: "btn-success",
                    callback: function () {

                    }
                }
            }
        });

        var substringMatcher = function(strs) {
            return function findMatches(q, cb) {
                var matches, substringRegex;

                // an array that will be populated with substring matches
                matches = [];

                // regex used to determine if a string contains the substring `q`
                substrRegex = new RegExp(q, 'i');

                // iterate through the pool of strings and for any string that
                // contains the substring `q`, add it to the `matches` array
                $.each(strs, function(i, str) {
                    if (substrRegex.test(str)) {
                        matches.push(str);
                    }
                });

                cb(matches);
            };
        };

        var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
            'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
            'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
            'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
            'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
            'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
            'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
            'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
            'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
        ];

        $('#the-basics .typeahead').typeahead({
                    hint: true,
                    highlight: true,
                    minLength: 1
                },
                {
                    name: 'states',
                    source: substringMatcher(states)
                });

    }

</script>

</body>



<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Bootbox -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

<!-- Typeahead -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>

</html>

Answer 1

我看到的唯一问题（如果您不使用其他库）是：

{
   name: 'states',
   source: substringMatcher(states)
}

删除此行并将源添加到 typehead 选项：

$('#the-basics .typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1,
    source: substringMatcher(states)
});

片段：

function show_bootbox() {

  var form = $('<div id="the-basics">' +
               '<input class="typeahead" type="text" placeholder="States of USA">' +
               '</div>');

  bootbox.dialog({
    message: form,
    title: "Example",
    buttons: {
      success: {
        label: "Ok",
        className: "btn-success",
        callback: function () {

        }
      }
    }
  });

  var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
                'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
                'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
                'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
                'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
                'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
                'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
                'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
                'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
               ];

  var substringMatcher = function (strs) {
    return function findMatches(q, cb) {
      var matches, substringRegex;

      // an array that will be populated with substring matches
      matches = [];

      // regex used to determine if a string contains the substring `q`
      substrRegex = new RegExp(q, 'i');

      // iterate through the pool of strings and for any string that
      // contains the substring `q`, add it to the `matches` array
      $.each(strs, function (i, str) {
        if (substrRegex.test(str)) {
          matches.push(str);
        }
      });

      cb(matches);
    };
  };

  $('#the-basics .typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1,
    source: substringMatcher(states)
  });
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>


<a href="#bootbox" onclick="show_bootbox()" class="btn btn-lg btn-danger">Show Bootbox</a>

Answer 2

如果 typeahead 像其他一些库一样工作，您只能将其应用于可见元素。在您调用 bootbox.dialog 之前，您的目标输入是不可见的，因此代码不会按原样工作。使用 bootbox.init 函数，或处理 shown.bs.modal 事件：

bootbox.init

var dialog = bootbox.dialog({ /* options */ });
dialog.init(function(){
    $('#the-basics .typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        name: 'states',
        source: substringMatcher(states)
    });
})

shown.bs.modal 事件

var dialog = bootbox.dialog({ /* options */ });
dialog.on('shown.bs.modal', function(){
    $('#the-basics .typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        name: 'states',
        source: substringMatcher(states)
    });
})

Bootbox 中的 Typeahead

Typeahead inside Bootbox

html

twitter-bootstrap

twitter-bootstrap-3

bootstrap-typeahead

bootbox

bootbox.init

shown.bs.modal 事件