网站首页
精品模板
会员模板
建站资源
站长素材
建站教程
编程笔记
编程问答
编程问答
前端开发问题 Java开发问题 C/C++开发问题 Python开发问题 C#/.NET开发问题 php开发问题 移动开发问题 数据库问题
沃梦达建站-编程问答-前端开发问题-正文

如何在 jquery selected 插件中选择没有选择的文本

2023-01-26前端开发问题
6
本文介绍了如何在 jquery selected 插件中选择没有选择的文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

下面是我的代码我的问题是我只想像剑道一样实现我的意思是当用户键入文本时不选择文本，如果我们不选择文本，应该从下拉列表中选择它，就像 

$(function(){$(".chosen-select").chosen();});

<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script><script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
<em>带组的多选</em><br><select data-placeholder="你最喜欢的足球队" style="width:350px;"class="chosen-select" 多个 tabindex="6"><option value=""></option><optgroup label="NFC 东"><option>达拉斯牛仔队</option><option>纽约巨人队</option><选项>费城老鹰队</选项><选项>华盛顿红皮队</选项></optgroup><optgroup 标签="NFC NORTH"><option>芝加哥熊队</option><option>底特律雄狮队</option><option>绿湾包装工队</option><option>明尼苏达维京人队</option></optgroup><optgroup label="NFC 南"><选项>亚特兰大猎鹰队</选项><选项>卡罗莱纳黑豹队</选项><option>新奥尔良圣徒队</option><option>坦帕湾海盗队</option></optgroup><optgroup label="NFC 西"><option>亚利桑那红雀队</option><选项>圣.路易斯·拉姆斯</option><option>旧金山 49 人队</option><option>西雅图海鹰队</option></optgroup><optgroup label="亚足联东区"><option>布法罗比尔</option><option>迈阿密海豚队</option><option>新英格兰爱国者队</option><option>纽约喷气机队</option></optgroup><optgroup label="AFC NORTH"><option>巴尔的摩乌鸦队</option><选项>辛辛那提孟加拉虎</选项><选项>克利夫兰布朗队</选项><选项>匹兹堡钢人队</选项></optgroup><optgroup label="亚足联南区"><option>休斯顿德州人队</option><选项>印第安纳波利斯小马队</选项><选项>杰克逊维尔美洲虎队</选项><option>田纳西泰坦队</option></optgroup><optgroup label="AFC 西区"><option>丹佛野马队</option><option>堪萨斯城酋长队</option><option>奥克兰突袭者队</option><option>圣地亚哥闪电队</option></optgroup></选择></div>

解决方案

我发现这样做的唯一方法是一旦下拉菜单被隐藏 - 检查输入的值是否与第一个元素的值相同下拉菜单，如果是这样 - 触发该元素的 mouseup(在下拉菜单内):

检查实时样本:

$(".chosen-select").chosen();$(".chosen-select").bind('chosen:hiding_dropdown', function(e, i) {searched_value = i.chosen.get_search_text();firstElementOnDropdown = i.chosen.search_results.find('li.active-result').first()if (firstElementOnDropdown.text().toLowerCase() == searched_value.toLowerCase()) {firstElementOnDropdown.trigger('mouseup');变量 t = i;设置超时(函数(){t.chosen.input_blur();}, 150);}});

<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script><script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
<em>带组的多选</em><br><select data-placeholder="你最喜欢的足球队" style="width:350px;"class="chosen-select" 多个 tabindex="6"><option value=""></option><optgroup label="NFC 东"><option>达拉斯牛仔队</option><option>纽约巨人队</option><选项>费城老鹰队</选项><选项>华盛顿红皮队</选项></optgroup><optgroup 标签="NFC NORTH"><option>芝加哥熊队</option><option>底特律雄狮队</option><option>绿湾包装工队</option><option>明尼苏达维京人队</option></optgroup><optgroup label="NFC 南"><选项>亚特兰大猎鹰队</选项><选项>卡罗莱纳黑豹队</选项><option>新奥尔良圣徒队</option><option>坦帕湾海盗队</option></optgroup><optgroup label="NFC 西"><option>亚利桑那红雀队</option><选项>圣.路易斯·拉姆斯</option><option>旧金山 49 人队</option><option>西雅图海鹰队</option></optgroup><optgroup label="亚足联东区"><option>布法罗比尔</option><option>迈阿密海豚队</option><option>新英格兰爱国者队</option><option>纽约喷气机队</option></optgroup><optgroup label="AFC NORTH"><option>巴尔的摩乌鸦队</option><选项>辛辛那提孟加拉虎</选项><选项>克利夫兰布朗队</选项><选项>匹兹堡钢人队</选项></optgroup><optgroup label="亚足联南区"><option>休斯顿德州人队</option><选项>印第安纳波利斯小马队</选项><选项>杰克逊维尔美洲虎队</选项><option>田纳西泰坦队</option></optgroup><optgroup label="AFC 西区"><option>丹佛野马队</option><option>堪萨斯城酋长队</option><option>奥克兰突袭者队</option><option>圣地亚哥闪电队</option></optgroup></选择></div>

更新

添加 setTimeout 到 blur 输入(导致菜单关闭)，因为在 setTimeout>选择所以需要在显示后隐藏它.

<块引用>

说明:在chosen 代码中有一个setTimeout 函数来显示菜单.我需要克服这种行为，所以我添加了一个新的 setTimeout，但间隔更长.

setTimeout 有 2 个参数

  • 运行函数
  • 等待时间(以毫秒为单位).

该函数将在超时后运行.在我的示例中 - 该函数是调用 chosen 菜单的 input_blur (以确保菜单被隐藏)，并且我确保它被调用 afterem> 150 毫秒).

The below is my code my problem is i just want to implement like kendo i mean not with selection when user types the text and if we won't select the text it should be selected from drop down list as like in kendo In the below image you can see if you type medium and click mouse in sideways i mean without selecting with mouse it loads from drop down. 

$(function(){
    $(".chosen-select").chosen();
});

<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  <script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
  
<div>
          <em>Multiple Select with Groups</em><br>
          <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6">
            <option value=""></option>
            <optgroup label="NFC EAST">
              <option>Dallas Cowboys</option>
              <option>New York Giants</option>
              <option>Philadelphia Eagles</option>
              <option>Washington Redskins</option>
            </optgroup>
            <optgroup label="NFC NORTH">
              <option>Chicago Bears</option>
              <option>Detroit Lions</option>
              <option>Green Bay Packers</option>
              <option>Minnesota Vikings</option>
            </optgroup>
            <optgroup label="NFC SOUTH">
              <option>Atlanta Falcons</option>
              <option>Carolina Panthers</option>
              <option>New Orleans Saints</option>
              <option>Tampa Bay Buccaneers</option>
            </optgroup>
            <optgroup label="NFC WEST">
              <option>Arizona Cardinals</option>
              <option>St. Louis Rams</option>
              <option>San Francisco 49ers</option>
              <option>Seattle Seahawks</option>
            </optgroup>
            <optgroup label="AFC EAST">
              <option>Buffalo Bills</option>
              <option>Miami Dolphins</option>
              <option>New England Patriots</option>
              <option>New York Jets</option>
            </optgroup>
            <optgroup label="AFC NORTH">
              <option>Baltimore Ravens</option>
              <option>Cincinnati Bengals</option>
              <option>Cleveland Browns</option>
              <option>Pittsburgh Steelers</option>
            </optgroup>
            <optgroup label="AFC SOUTH">
              <option>Houston Texans</option>
              <option>Indianapolis Colts</option>
              <option>Jacksonville Jaguars</option>
              <option>Tennessee Titans</option>
            </optgroup>
            <optgroup label="AFC WEST">
              <option>Denver Broncos</option>
              <option>Kansas City Chiefs</option>
              <option>Oakland Raiders</option>
              <option>San Diego Chargers</option>
            </optgroup>
          </select>
        </div>

解决方案

The only way I found to do so is once the dropdown is hidden - check if the value of the input is the same as the value of the first element in the drop down, and if so - trigger the mouseup for that element (inside the dropdown):

Check live sample:

$(".chosen-select").chosen();
$(".chosen-select").bind('chosen:hiding_dropdown', function(e, i) {
  searched_value = i.chosen.get_search_text();
  firstElementOnDropdown = i.chosen.search_results.find('li.active-result').first()
  if (firstElementOnDropdown.text().toLowerCase() == searched_value.toLowerCase()) {
    firstElementOnDropdown.trigger('mouseup');
    var t = i;
    setTimeout(function() {
      t.chosen.input_blur();
    }, 150);
  }
});

<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
<div>
  <em>Multiple Select with Groups</em><br>
  <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6">
    <option value=""></option>
    <optgroup label="NFC EAST">
      <option>Dallas Cowboys</option>
      <option>New York Giants</option>
      <option>Philadelphia Eagles</option>
      <option>Washington Redskins</option>
    </optgroup>
    <optgroup label="NFC NORTH">
      <option>Chicago Bears</option>
      <option>Detroit Lions</option>
      <option>Green Bay Packers</option>
      <option>Minnesota Vikings</option>
    </optgroup>
    <optgroup label="NFC SOUTH">
      <option>Atlanta Falcons</option>
      <option>Carolina Panthers</option>
      <option>New Orleans Saints</option>
      <option>Tampa Bay Buccaneers</option>
    </optgroup>
    <optgroup label="NFC WEST">
      <option>Arizona Cardinals</option>
      <option>St. Louis Rams</option>
      <option>San Francisco 49ers</option>
      <option>Seattle Seahawks</option>
    </optgroup>
    <optgroup label="AFC EAST">
      <option>Buffalo Bills</option>
      <option>Miami Dolphins</option>
      <option>New England Patriots</option>
      <option>New York Jets</option>
    </optgroup>
    <optgroup label="AFC NORTH">
      <option>Baltimore Ravens</option>
      <option>Cincinnati Bengals</option>
      <option>Cleveland Browns</option>
      <option>Pittsburgh Steelers</option>
    </optgroup>
    <optgroup label="AFC SOUTH">
      <option>Houston Texans</option>
      <option>Indianapolis Colts</option>
      <option>Jacksonville Jaguars</option>
      <option>Tennessee Titans</option>
    </optgroup>
    <optgroup label="AFC WEST">
      <option>Denver Broncos</option>
      <option>Kansas City Chiefs</option>
      <option>Oakland Raiders</option>
      <option>San Diego Chargers</option>
    </optgroup>
  </select>
</div>

Update

Added setTimeout to blur the input (which cause the menu to close), since there is another setTimeout inside the code of chosen so needed to hide it after it's shown.

Explanation: Inside the chosen code there is is a setTimeout function to show the menu. I needed to overcome this behavior so I added a new setTimeout, but with higher interval.

The setTimeout gets 2 arguments

  • Function to run
  • Time to wait (in milliseconds).

The function will run after the timeout is up. In my sample - the function is call the input_blur of the chosen menu (to make sure the menu is hidden), and I made sure it's called after 150 milliseconds).

这篇关于如何在 jquery selected 插件中选择没有选择的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

The End

相关推荐

ajax请求获取json数据并处理的实例代码
ajax请求获取json数据并处理的实例代码 $.ajax({ type: 'GET', url: 'https://localhost:44369/UserInfo/EditUserJson',//请求数据 data: json,//传递数据 //dataType:'json/text',//预计服务器返回的类型 timeout: 3000,//请求超时的时间 //回调函数传参 suc...
2024-11-22 前端开发问题
215
js删除数组中指定元素的5种方法
在JavaScript中，我们有多种方法可以删除数组中的指定元素。以下给出了5种常见的方法并提供了相应的代码示例： 1.使用splice()方法： let array = [0, 1, 2, 3, 4, 5];let index = array.indexOf(2);if (index -1) { array.splice(index, 1);}// array = [0,...
2024-11-22 前端开发问题
182
layui 单选框、复选框、下拉菜单不显示问题如何解决？
1. 如果是ajax嵌套了 页面， 请确保 只有最外层的页面引入了layui.css 和 layui.js ,内层页面 切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...
2024-11-09 前端开发问题
313
layui中表单会自动刷新的问题
layui中表单会自动刷新的问题，因为用到layui的表单，遇到了刷新的问题所以记录一下： script layui.use(['jquery','form','layer'], function(){ var $ = layui.jquery, layer=layui.layer, form = layui.form; form.on('submit(tijiao)', function(data){ a...
2024-10-23 前端开发问题
262
JavaScript小数运算出现多位的解决办法
在开发JS过程中，会经常遇到两个小数相运算的情况，但是运算结果却与预期不同，调试一下发现计算结果竟然有那么长一串尾巴。如下图所示： 产生原因： JavaScript对小数运算会先转成二进制，运算完毕再转回十进制，过程中会有丢失，不过不是所有的小数间运算会...
2024-10-18 前端开发问题
301
jQuery怎么动态向页面添加代码？
append() 方法在被选元素的结尾（仍然在内部）插入指定内容。 语法： $(selector).append( content ) var creatPrintList = function(data){ var innerHtml = ""; for(var i =0;i data.length;i++){ innerHtml +="li class='contentLi'"; innerHtml +="a href...
2024-10-18 前端开发问题
125

热门文章

1错误 [ERR_REQUIRE_ESM]:不支持 ES 模块的 require() 2vue中yarn install报错：info There appears to be trouble with you 3为什么 Chrome(在 Electron 内部)会突然重定向到 chrome-error://chromewebdat 4“aria-hidden 元素不包含可聚焦元素"显示模态时的问题 5使用选择器在 CSS 中选择元素的前一个兄弟 6js报错：Uncaught SyntaxError: Unexpected string 7layui怎么刷新当前页面？ 8将模式设置为“no-cors"时使用 fetch 访问 API 时出错

热门精品源码

最新VIP资源

1多功能实用站长工具箱html功能模板 2多风格简历在线生成程序网页模板 3论文相似度查询系统源码 4响应式旅游景点宣传推广页面模板 5在线起名宣传推广网站源码 6酷黑微信小程序网站开发宣传页模板 7房产销售交易中介网站模板 8小学作业自动生成程序