我将如何修剪输入到JQuery自动完成框？ [英] How would I trim the input to a JQuery auto-complete box?

问题描述

有没有什么办法可以修改（删除前导空格/尾部空格）用户输入的输入到jQuery自动完成文本< input> 框之前与名称列表匹配：值？我目前有一个文本框，其中的用户是为了输入名字。然后，名称与jQuery的name：value对列表进行匹配：

 < script type =text / javascript > 
 
 var resources = [
<？php 
 foreach（$ data ['Resource'] as& $ row）{
 $ Name = $ row [ 'Forename']。。$ row ['Surname']; 
 echo{; 
 echolabel：'$ Name'，; 
 echovalue：'$ row [EmployeeNumber]'; 
 echo}，; 
} 
？> 
]; 
 
 jQuery（function（）{
 jQuery（'＃Resource'）。autocomplete（{
 source：resources，
 focus：function（event，ui）{ 
 jQuery（'＃Resource'）.val（ui.item.label）; 
 return false; 
}，
 select：function（event，ui）{
（jQuery（'＃Resource'）.val（ui.item.label）; 
 jQuery（'＃EmployeeNumber'）.val（ui.item.value）; 
返回false; 
 } 
}）; 
}）; 
< / script> 
  

我的问题是，如果用户输入的名字与资源地图，但后面有空格，它不会被匹配，因此没有值将被分配给输入。如果可能的话，我想至少在这个映射上忽略尾随空格（如果不是空格的话）。

另外，是否可以添加默认值对于输入框，如果没有找到地图？

编辑：

另外，如果用户键入的内容不匹配，是否可以在下拉式自动填充框中显示一个不匹配的条目？对问题后的修改抱歉。

解决方案

您可以自己找到 code>函数，而不是使用内置函数，如下所示：



  source：function（request，response）{
 var matcher = new RegExp（$。trim（request.term）.replace（/ [ -  [\] {}（）* +？。，\\\ ^ $ |＃\s] / g， \\ $&），我）; 
 response（$。grep（resources，function（value））{
 return matcher.test（value.label || value.value || value）; 
}））; 
} 
  

你可以在这里尝试一个演示。这使用 $。trim（） 在将其传递到 $。grep（）


$ b

对于code> 来获得您想要的前导/尾随空格忽略效果。你的编辑，你可以做到这一点，但没有结果...可以选择，给它一个尝试这里：



  source：function（request，response）{
 var matcher = new RegExp（ $ .trim（request.term）.replace（/ [ -  [\] {}（）* +？。，\\\ ^ $ |＃\s] / g，\\ $& ）， 一世 ）; 
 var matches = $ .grep（resources，function（value）{
 return matcher.test（value.label || value.value || value）; 
}）; 
 response（matches.length？matches：[{label：'No Result Found'，value：''}]）; 
} 
  




Is there any way to trim (remove leading/trailing spaces) the input entered by a user into a jQuery auto-completing text <input> box before it is matched against the list of names:values? I currently have a textbox in which users are meant to enter names. The names are then matched against a list of name:value pairs by jQuery:

<script type="text/javascript">

var resources = [
               <?php 
                    foreach($data['Resource'] as &$row){
                        $Name = $row['Forename']." ".$row['Surname'];  
                        echo "{";
                        echo "  label:'$Name',";
                        echo "  value:'$row[EmployeeNumber]'";
                        echo "},";
                    }
                 ?>
                ];

    jQuery(function(){
        jQuery('#Resource').autocomplete({
            source: resources,
            focus: function(event, ui) {
                jQuery('#Resource').val(ui.item.label);
                return false;
            },          
            select: function(event, ui) {
                jQuery('#Resource').val(ui.item.label);
                jQuery('#EmployeeNumber').val(ui.item.value);
                return false;
            }
        });
    }); 
</script>

My problem is that if the user enters a name that matches one in the resources map, but with spaces after it, it won't be matched and thus no value will be assigned to the input. I would like for trailing spaces at least (if not also leading spaces) to be ignored on this mapping if possible.

Additionally, would it be possible to add a default value for the input box if no map is found?

EDIT:

As an aside, is it possible to have a no-match entry shown in the drop-down autocomplete box if the user types something that doesn't match? Apologies for the after-question edit.

解决方案

You can do the find yourself in the source function, instead of using the built-in function, like this:

source: function( request, response ) {
  var matcher = new RegExp($.trim(request.term).replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), "i" );
  response($.grep(resources, function(value) {
    return matcher.test( value.label || value.value || value );
  }));
}

You can try a demo here. This uses $.trim() to trim down the search term before it gets passed into $.grep() to get the leading/trailing white-space ignorant effect you want.

---

For your edit, you can do this, but the "No Result..." will be selectable, give it a try here:

source: function( request, response ) {
  var matcher = new RegExp($.trim(request.term).replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), "i" );
  var matches = $.grep(resources, function(value) {
    return matcher.test( value.label || value.value || value );
  });
  response(matches.length ? matches : [{ label: 'No Result Found', value: '' }]);
}

这篇关于我将如何修剪输入到JQuery自动完成框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！