社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Jquery

使用bootstrap和jquery实现select2时,新的文本字段重叠

satya • 4 年前 • 748 次点击  

我正在使用 select2 使用jquery进行自动建议的插件,但它在现有文本字段的基础上添加了一个新的文本字段。我在下面提供我的代码。

<div class="col-md-3 form-group">
   <div class="">
      <label class="control-label go-right">Select City</label>
    </div>
    <input type="text" id="currentlocationlist" class="form-control">
</div>


$("#currentlocationlist").select2({
          placeholder:'Enter location name',
          minimumInputLength: 3,
          width:'100%',
          maximumSelectionSize: 1,
          initSelection:function(element, callback){
            var data = {id: "1", text: " "};
            callback(data);
          },
          ajax:{
            url: "<?php echo base_url(); ?>admin/ajaxcalls/locationsList",
            dataType: 'json',
            data: function (term, page) {
              return {
                query: term, // search term
              };
            },
            results: function (data, page) {
              return {results: data};
            }
          }
        })
        $("#currentlocationlist").on("select2-selecting", function(e) {
          $("#currentlocationlist").val(e.val);
        });

在这里,所有的工作如预期,但一个新的文本字段是重叠现有的,屏幕截图如下。

enter image description here

在这里,我需要将两个文本字段合并为一个。

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/39995
 
748 次点击  
文章 [ 1 ]  |  最新文章 4 年前
Shashank
Reply   •   1 楼
Shashank    5 年前

干掉这个班 form-control 适用于 <input> 贴上标签就行了。

代码片段 表单控件 班级:

$('#currentlocationlist').select2({
    width: '100%',
    allowClear: true,
    multiple: true,
    maximumSelectionSize: 1,
    placeholder: "Click here",
    data: [
            { id: 1, text: "Ford"     },
            { id: 2, text: "Dodge"    },
            { id: 3, text: "Mercedes" },
            { id: 4, text: "Jaguar"   }
          ]    
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/select2/3.4.8/select2.css">

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script>

<div class="col-md-3 form-group">
   <div class="">
      <label class="control-label go-right">Select City</label>
    </div>
    <input type="text" id="currentlocationlist" class="form-control">
</div>

这是一个片段 没有 这个 表单控件 :

$('\currentlocationlist')。选择2({
宽度:“100%”,
AllowClear:真的,
多重:真的,
最大选择大小:1,
占位符:“点击这里”,
数据:[
{id:1,文本:“ford”},
{id:2,文本:“dodge”},
{id:3,文本:“mercedes”},
{id:4,文本:“jaguar”}
]
(});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/select2/3.4.8/select2.css">

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script>

<div class="col-md-3 form-group">
   <div class="">
      <label class="control-label go-right">Select City</label>
    </div>
    <input type="text" id="currentlocationlist" class="">
</div>

这是因为 班级 分配给要初始化的元素 select2 将get添加到select2库中呈现的select2容器中,因为 表单控件 得到应用,从而导致混乱。希望这有帮助。