Bootbox 中的 Typeahead答案

【问题标题】：Typeahead inside BootboxBootbox 中的 Typeahead
【发布时间】：2016-09-16 12:29:28
【问题描述】：

我无法在 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>

【问题讨论】：

请将源代码添加到问题本身。如果链接以某种方式断开，它将没有用。

标签： html twitter-bootstrap twitter-bootstrap-3 bootstrap-typeahead bootbox

【解决方案1】：

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

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

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

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

sn-p：

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>

【讨论】：

【解决方案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)
    });
})

【讨论】：