Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >jQuery UI自动完成不能很好地用于引导下拉列表

jQuery UI自动完成不能很好地用于引导下拉列表
EN

Stack Overflow用户
提问于 2017-11-30 12:05:29
回答 1查看 1.8K关注 0票数 1

代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<body>
  <div class="container">  

      <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">dumped_li</a></li>
          <div class="ui-widget">
            <label for="tags">Tags: </label>
            <input id="tags">
          </div>
        </ul>
       </div>

    </div>
</body>

    <script>
      $( function() {
        var availableTags = [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
          "Clojure",
          "COBOL",
          "ColdFusion",
          "Erlang",
          "Fortran",
        ];
        $( "#tags" ).autocomplete({
          source: availableTags
        });
      } );
      </script>

我做了一些代码,有jQuery UI自动完成在引导下拉。

当我运行它时,搜索栏(在本例中,输入-#标记)被很好地放置在下拉菜单中,但是autocomplish()结果显示在下拉菜单本身之外。

问题:如何将autocomplish()结果很好地放置到下拉菜单中,比如input (#tags)?

编辑:

我阅读了这篇堆栈溢出文章:https://stackoverflow.com/a/7944662/6736285和我发现了使用引导带和不使用引导带之间的区别。

听着,如果我使用引导: jsfiddle:http://jsfiddle.net/uMqyn/912/

代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

</head>

<body>
  <div class="dropdown bigdiv">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
      <span class="caret"></span></button>
    <ul class="dropdown-menu bigul">
      <li><a href="#">dumped_li</a></li>
      <li class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags">
      </li>
    </ul>
  </div>
  <br/>
  <br/>
  <br/>

  <br/>
  <br/>
  <div class="anotherdiv" style="background-color: #447e9b; height: 200px;">
    GoesHere:
    <br/>
    <ul></ul>
  </div>
</body>
<script>
var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
];
$('#tags').autocomplete({
    search: function(event, ui) {
        $('.anotherdiv ul').empty();
    },
    source: availableTags
}).data('autocomplete')._renderItem = function(ul, item) {

    return $('<li></li>')
   .data('item.autocomplete', item)
   .append(item.value)
   .appendTo($('.anotherdiv ul'));
};
</script>

正如你在“小提琴”中所看到的,它的作用就好像结果不是在另一个人身上一样。

但我去掉了鞋带,效果很好。

您可以看到引导删除版本jsfiddle:http://jsfiddle.net/uMqyn/913/

所以,

Question1:为什么引导出现这种情况?

Question2:,我如何使它在显示结果方面做得很好,即使我正在使用引导?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-12-01 01:02:05

AFAIK --您可能遇到了一些兼容性问题(我不确定,但如果处于您的位置,我可能会放弃jquery ui --它还没有被更新并且很老--并且可能与引导css不太兼容)。

来自https://jqueryui.com/

jQuery UI v1.12.1似乎只与jQuery 1.7+兼容

jQuery UI v1.12.1 jQuery 1.7+

从您的示例(http://jsfiddle.net/uMqyn/912/)中,您正在尝试在jquery 3.2.1中使用jquery-ui 1.12.1

使用引导+ jquery 1.9.1 +jquery 1.9.2

http://jsfiddle.net/sudarpochong/uMqyn/914/

没有引导(只有jquery 1.9.1 +jquery 1.9.2)

http://jsfiddle.net/sudarpochong/uMqyn/916/

备注

如果您注意到,以上两个链接(有和不带引导)都会产生类似于您在http://jsfiddle.net/uMqyn/913/中所期望的结果。

P.S.

  • 检查jsfiddle --> external resources如何包含引导js和css。
  • JSFiddle - Javascript选项允许您选择jquery和jquery。
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47581713

复制
相关文章
用于列表下拉加载loading动画
一、效果图 弹跳加载 二、实现代码 <view class="bouncing-loader"> <view></view> <view></view> <view></view> </v
_kyle
2020/08/24
3.6K0
用于列表下拉加载loading动画
jQuery动态加载select下拉列表「建议收藏」
  以前使用的select下拉列表都是静态的,select 的option数据都是写死的。现在项目中的select需要根据不同的场景使用不同的数据,解决方式就是动态加载option数据。
Java架构师必看
2022/03/14
4.6K0
[Excel技巧]创建下拉列表
在单位用Excel做统计,想偷个小懒,比如食品一栏。能不能设计一个下拉列表,直接在列表框中选择,省去键盘的重复输入呢?
卷福同学
2023/04/28
2.3K0
[Excel技巧]创建下拉列表
Java 下拉列表
import java.awt.Container; import java.awt.FlowLayout; import java.awt.Font; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.ComboBoxModel; import javax.swing.DefaultComboBoxModel; import javax.swing.JButton; im
用户2965768
2019/03/04
3K0
jQuery stop() 方法用于在动画或效果完成前
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
用户7718188
2021/10/07
6520
html手机端下拉菜单代码,jQuery手机移动端下拉列表选择代码「建议收藏」
$(‘.downlist’).eq($(“.retrie dt a”).index($(this)[0])).show();
全栈程序员站长
2022/07/31
5.7K0
在jquery中用下拉框列表显示默认的值
1、在postUpdate.jsp中添加js如下: <script type="text/javascript"> $(document).ready(function(){ var qx_value = $('#qx_select_value').val(); $("#qx_select option[value='"+qx_value+"']").attr("selected", "selected"); }) </script> 核心代码就这一句话: $("
qubianzhong
2018/08/10
3.6K0
解决Select2控件不能在jQuery UI Dialog中不能搜索的bug
本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面。逻辑是修改一个广告的图片和标题。 效果截图
八哥
2018/01/18
1.6K0
解决Select2控件不能在jQuery UI Dialog中不能搜索的bug
Selenium处理下拉列表
在执行Selenium自动浏览器测试时,很多时候需要处理下拉菜单。下拉菜单通常用于表单中,在节省空间和防止用户在表单中选择错误的选项时非常有用。因此在测试任何网站或访问表单时,如何使用Selenium处理下拉列表显得尤为重要。
FunTester
2020/07/22
6.1K0
jQuery实现用户输入自动完成功能
利用jQuery UI中Auto-complete插件实现输入自动完成功能,大家在使用诸如淘宝、京东等电商平台搜索商品时,往往只要输入商品的一些特殊字符,就可以显示出和该字符相近的列表菜单,用户使用鼠标或者键盘方向键就可以快速选择,实现了很好的用户体验。
Sindsun
2019/12/10
1.6K0
jQuery实现用户输入自动完成功能
使用jQuery UI的draggable和droppable完成拖拽功能--介绍
第一部分--拖拽介绍 在https://code.csdn.net/2013ossurvey中最后一个开源项目就是zTree,一方面是因为自己看到有项目中使用了zTree,而已大家表示还不错。另外一方面,自己需要实现一个zTree不支持的复杂逻辑的拖拽功能。总体来说,我要实现的是一个可以拖拽的树形列表。当然最新版zTree也支持多课树之间的数据交互。当然一般的企业开发或者web开发中,使用到2个或3个数就足够了。太多了树形结构对于用户来说,也非常复杂。个人推荐不是非常复杂的需求都可以考虑使用zTree,因为
八哥
2018/01/18
2.2K0
使用jQuery UI的draggable和droppable完成拖拽功能--介绍
基于web技术的操作系统安装器的设计
什么是基于web技术的安装器(web-based installer)? 传统的Linux操作系统安装需要启动一个LiveOS,然后在LiveOS中运行一个本地安装程序,如Fedora下的Anacon
宅蓝三木
2018/02/07
1.3K0
基于web技术的操作系统安装器的设计
jQuery练习——下拉菜单
实现效果:当鼠标移到不同的一级菜单,会显示相应的二级菜单,鼠标移走,二级菜单消失。
颜颜yan_
2022/12/01
27K0
jQuery练习——下拉菜单
HTML 下拉列表框<select>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/03
4.8K0
awesome-javascript-cn
JS 资源列表,内容包括:包管理器、加载器、测试框架、运行器、QA、MVC框架和库、模板引擎、数据可视化、时间轴、编辑器等等。 包管理器 管理着 JavaScript 库,并提供读取和打包它们的工具。 npm:npm 是 JavaScript 的包管理器。官网 Bower:一个 web 应用的包管理器。官网 component:能构建更好 web 应用的客户端包管理器。官网 spm:全新的静态包管理器。官网 jam:一个专注于浏览器端和兼容 RequireJS 的包管理器。官网 jspm:流畅的浏览器包管理
guanguans
2018/05/09
10.7K0
jQuery下拉菜单经典案例
jQuery下拉菜单经典案例  源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <
红目香薰
2022/11/29
11.1K0
jQuery下拉菜单经典案例
自定义下拉列表
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body{ margin: 20px; } ul,li{ margin: 0px; padding: 0px; list-style: none; } #test1{ width: 300px; height: 40px; border: solid 1px darkred; line-height: 40px
前朝楚水
2018/04/02
1.9K0
点击加载更多

相似问题

jQuery-UI的自动完成不能很好地显示,z索引问题

126

jQuery UI自动完成未填充下拉列表

15

jquery-ui 1.9.1自动完成无下拉列表

12

材质UI下拉列表/自动完成

114

jQuery UI自动完成-下拉列表中的条件样式

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文