时间戳

首页 > 解决方案 > JQuery 和 editableSelect 包不允许我使用 RegExp 过滤选择菜单。JavaScript 和 jQuery 小块或新手

javascript - JQuery 和 editableSelect 包不允许我使用 RegExp 过滤选择菜单。JavaScript 和 jQuery 小块或新手

问题描述

这是一个使用 PHP、MariaDB 和 HTML 构建的选择列表：

    echo "<select name='companylist' id='companylist' size='86' value='' tabindex='1' >";
    echo "<option value=''></option>";
    echo "<option value='0-Create a New Company'>0-Create a New Company</option>";
    foreach ($companyResult as $company) {
      echo "<option id='".$company['Company_Key']."' 
      value='".$company['Company_Key']."'>".$company['Company_Names']."</option>";
    }
    echo "</select>";

它构建了一个适合我的应用程序的下拉列表。

接下来，我构建了这个测试脚本，以了解我在使用 RegExp 动态过滤下拉选择列表时是否走在正确的轨道上，并且它运行良好，就其目的而言。我之所以建造它，是因为它后面的列表很适合我。

    echo "<script>";
    echo "$('#companylist option').each(function() {
           var Val = this.text;
           var Filter='W';
           var CompRegex = new RegExp('^'+Filter);
           if(CompRegex.test(Val)){
             console.log('RegExp with Filter has found the following Val starting with this 
             Filter: '+Filter);
             console.log('Val = ' + Val);
           }
         })";
    echo "</script>";

以上为我提供了以下控制台输出： 带有过滤器的 RegExp 找到了以该过滤器开头的以下 Val：W Val = Welch Tile 带有过滤器的 RegExp 找到了以该过滤器开头的以下 Val：W Val = 带有过滤器的西密歇根成型 RegExp 具有发现以下 Val 从这个过滤器开始： W Val = WL Molding of MI 这是一个好的开始。

    echo "<script>";
    echo "  $('#companylist')";
    echo "    .editableSelect()";
    echo "    .on('select.editable-select', function (e, li) {
                 console.log('value = ' + document.getElementById('companylist').value);
                 console.log('li.val() = '+li.val());
                 getCustomer_Names(li.val());
                 getTool_Numbers(li.val());
                 getPart_Name(li.val());
                 newCompany_Name();
               })";
    echo "</script>";

一旦用户选择了一个项目，上面的脚本就会按预期加载其他菜单。

这里的下一个脚本根本不会让我获得用户在列表中看到的选项文本。我有 5 天的时间，因为我是 JQuery 新手，也不是 Javascript 大师，但我确实阅读了各种网站寻求帮助，包括参考指南和支持板（谢谢你！），但是我想要一个快乐的结局。如前所述，任何帮助将不胜感激。

    echo "<script>";
    echo "  $('#companylist')";
    echo "    .editableSelect()";
    echo "    .on('input.editable-select', function () {
                 $(this).each(function() {
                   var Val = this.text;
                   var Filter = this.value;
                   var CompRegExp = new RegExp('^'+Filter);
                   console.log('Val = '+Val);
                   console.log('Filter = '+Filter);
                   console.log('CompRegExp = '+CompRegExp);
                   if(CompRegExp.test(Val)){
                     console.log('RegExp with Filter has found the following Val starting with this 
                     Filter: '+Filter);
                     console.log('Val = ' + Val);
                   }
                   else {
                     // remove from select list
                   }
                 });
               });";
    echo "</script>";

上面的脚本给了我

Val = undefined
Filter = a
CompRegExp = /^a/

我的失败是“Val = undefined”。

我还对这个问题进行了长期观察，并编写了一个 jQuery/JavaScript 程序来清除下拉列表，然后通过让 PHP 程序重新查询数据库以获取与 SQL LIKE 'Input%' 匹配的值来重新创建选项我将包括在内，以向您展示这里的努力深度。这里的问题是，即使我发出了 .editableSelect('show'); ，我也无法让下拉菜单保持打开状态；按照editableSelect git网站中的说明打开下拉菜单并显示修改后的列表，但是，如果我在该字段中单击并移动光标，它将弹出菜单打开，其中包含与MariaDB的返回匹配的值。它遵循：

    echo "<script>
      function getCompany_Names(comp_val)
      {
          if(document.getElementById('companylist').value.substring(0,8) != '0-Create'){
          $('#companylist').editableSelect('clear');
          var xhttp;
          if (comp_val === null || comp_val === '' ) {
            $('#companylist').editableSelect('add', '<option value=></option>');
            $('#companylist').editableSelect('add', '<option value=0-Create a New Company>0-Create a 
               New Company</option>');
          }
          xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              var select = $('#companylist');
              var c_text = this.responseText;
              console.log('comp_ctext = ' + c_text);
              c_text = JSON.parse(c_text);
    
              $.each($(c_text),function(key,value){
                if (value.compname == 'One or more Company Names are Probably Not Entered.')
                {
                  $('#companylist').editableSelect('add','<option value=' + 'One or more Company 
                  Names are Probably Not Entered.' + '>One or more Company Names are Probably Not 
                  Entered.</option>');
                }
                else
                {
                  console.log('<option id=\'' + value.compkey + '\' value=\'' + value.compkey + '\'>' 
                  + value.compname + '</option>');
                  $('#companylist').editableSelect('add','<option id=\'' + value.compkey + '\' 
                  value=\'' + value.compkey + '\'>' + value.compname + '</option>');
                }
              }); // end .editableSelect('add',...)
            }
          };
          xhttp.open('GET', 'getCompany_Names.php?q='+comp_val, true);
          xhttp.send();
         }
        }
    
        </script>";

这完全是因为我的顾客不喜欢 editableSelect 包的默认过滤器行为，它与下拉列表中任何位置的任何值匹配，并希望一些下拉列表将输入与从第一个字符开始的结果相匹配，例如（完全像） 的正则表达式/^input_variable/。

感谢您的时间。

R

标签： javascriptphphtmljquery

解决方案

它不是一个解决方案，只是更容易问一些东西..我稍后会删除更多

我不明白这种语法：.on 之前没有选择器？？

.on('input.editable-select', function () {
                 $(this).each(function() {

我看到 $(this) 这意味着你有更多的输入？

这些行的问题：

               var Val = this.text;
               var Filter = this.value;

什么是Val？因为this.text不能用于输入？（这是 Val => 未定义的原因）

this.value给出你输入的内容

推荐阅读