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
或者直接下载附件：

demo2.txt (162.62 KB, 下载次数: 2) 附件实际是一个rar文件，修改扩展名，然后解压即可。

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

不会，但是可以给你顶一下

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

再把弹出层的层级改一改就可以：

[CSS] 纯文本查看 复制代码

.swal2-shown {
	z-index: 0;
}

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

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

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

[JavaScript] 纯文本查看 复制代码

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

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

[Asm] 纯文本查看 复制代码

z-index:99999

实测正常

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

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

你好，是这样吗？
我试了还是无效。

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

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

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

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

想哭，还是不行

[HTML] 纯文本查看 复制代码

<!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后，需要插入
[mw_shl_code=javascript,true]

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

帐号		自动登录	找回密码
密码			注册[Register]

[求助] jQuery Autocomplete+sweetalert2的问题。