文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootbox中的Typeahead

问Bootbox中的Typeahead
EN

Stack Overflow用户

提问于 2016-09-16 20:29:29

回答 2查看 265关注 0票数 0

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

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-09-17 00:05:54

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

{
   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>

票数 0

Stack Overflow用户

发布于 2016-09-17 00:20:48

如果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)
    });
})

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39531569

复制

相似问题

问Bootbox中的Typeahead
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootbox中的TypeaheadEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootbox中的Typeahead
EN