jQuery Autocomplete+sweetalert2的问题。

cqwcns 发表于 2019-11-13 13:37

本帖最后由 cqwcns 于 2019-11-13 13:39 编辑

问题：jQuery Autocomplete在sweetalert2对话框中无法弹出自动填写列表。
各位大神有没有解决办法，我写了一个demo（见附件），谢谢
Demo免CB下载链接:https://pan.baidu.com/s/1ggdTncffPwW6F0XDL_NGNg 提取码: 8dcu
或者直接下载附件：附件实际是一个rar文件，修改扩展名，然后解压即可。

liutao 发表于 2019-11-13 13:46

http://43.226.148.123:9900/444gfgfgf.jpg
不会，但是可以给你顶一下

dazhuangzhuang 发表于 2019-11-13 13:56

自己写autocomplete吧，无非是模糊查询，然后填充div

zzzkc 发表于 2019-11-13 14:22

在按钮生成弹窗时，需要再注册一次：
$(".inpSearch" ).autocomplete({
source: availableTags
});
而且弹出层的层级太高，可以去除z-index

晚安程序员 发表于 2019-11-13 14:25

代码已贴，你没有理解js，前端渲染加载机制。

zzzkc 发表于 2019-11-13 14:27

zzzkc 发表于 2019-11-13 14:22
在按钮生成弹窗时，需要再注册一次：
$(".inpSearch" ).autocomplete({
source: availableTags

再把弹出层的层级改一改就可以：
.swal2-shown {
z-index: 0;
}

ttphoon2010 发表于 2019-11-13 14:39

本帖最后由 ttphoon2010 于 2019-11-13 14:44 编辑

问题有两个：
1、swal.fire()代码里新加入input后，需要插入

$( ".inpSearch" ).autocomplete({
source: availableTags
});

2、放到弹窗中的时候就无法显示是因为被挡住了，此时需要提高autocomplete的z-index。我的方法是直接到css文件夹了找到.ui-autocomplete然后添加
z-index:99999
实测正常

cqwcns 发表于 2019-11-13 14:39

晚安程序员发表于 2019-11-13 14:25
代码已贴，你没有理解js，前端渲染加载机制。

你好，是这样吗？
我试了还是无效。
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/jquery-ui.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/sweetalert2.js"></script>

</head>
<body>
<h3 style="color: red">问题：jQuery Autocomplete在sweetalert2对话框中无法弹出自动填写列表。</h3>
<h2>仅autocomplete：</h2>
<input class="inpSearch" placeholder="autocomplete input">
</br>
</br>
<h2>sweetalert2+autocomplete：</h2>
<button>srart</button>

<script>
$(function() {
var availableTags = ["ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];
$( ".inpSearch" ).autocomplete({
source: availableTags
});
});

   $("button").click(function() {
   Swal.fire({
   title: 'Multiple inputs',
   html:'<input class="swal2-input inpSearch" placeholder="autocomplete input"><input class="swal2-input">',
   })
$(".inpSearch" ).autocomplete({
   source: availableTags
});

   } )
</script>
</body>

cqwcns 发表于 2019-11-13 14:45

本帖最后由 cqwcns 于 2019-11-13 14:47 编辑

ttphoon2010 发表于 2019-11-13 14:39
问题有两个：
1、swal.fire()代码里新加入input后，需要插入

想哭，还是不行{:301_972:}
<!doctype html>
<html>
   <head>
   <meta charset="utf-8">
   <title>无标题文档</title>
   <link href="css/jquery-ui.min.css" rel="stylesheet">
   <script src="js/jquery.js"></script>
   <script src="js/jquery-ui.min.js"></script>
   <script src="js/sweetalert2.js"></script>
   </head>
   <body>
            <h3 style="color: red">问题：jQuery Autocomplete在sweetalert2对话框中无法弹出自动填写列表。</h3>
            <h2>仅autocomplete：</h2>
            <input class="inpSearch" placeholder="autocomplete input">
            </br>
   </br>
   <h2>sweetalert2+autocomplete：</h2>
   <button>srart</button>

   <script>
   $(function() {
            var availableTags = ["ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];
            $( ".inpSearch" ).autocomplete({
                     source: availableTags
            });
   });

      $("button").click(function() {
               Swal.fire({
                     title: 'Multiple inputs',
                     html:'<input class="swal2-input inpSearch" placeholder="autocomplete input"><input class="swal2-input">',
               });

            $(".inpSearch" ).autocomplete({
                     source: availableTags
            });

      } )
</script>
</body>
</html>

cqwcns 发表于 2019-11-13 14:48

ttphoon2010 发表于 2019-11-13 14:39
问题有两个：
1、swal.fire()代码里新加入input后，需要插入

麻烦大哥再帮我看看我哪里写错了，谢谢

页: [1] 2

吾爱破解 - 52pojie.cn's Archiver

jQuery Autocomplete+sweetalert2的问题。