如何修改JQuery自动完成框的输入？

Question

有没有办法修剪(删除前导/尾随空格)用户输入到jQuery自动完成文本<input>框的输入,然后再与名称列表匹配:值？我目前有一个文本框,用户可以在其中输入名称.然后通过jQuery将名称与name:value对列表进行匹配:

<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>

我的问题是,如果用户输入的名称与resources地图中的名称匹配,但在其后面带有空格,则不会匹配,因此不会为输入分配任何值.如果可能的话,我希望在此映射中至少忽略尾随空格(如果不是前导空格).

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

编辑:

另外,如果用户输入的内容不匹配,是否可以在下拉自动填充框中显示不匹配条目？为问题后编辑道歉.

Answer 1

你可以在source函数中找到自己,而不是使用内置函数,如下所示:

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 );
  }));
}

你可以在这里试一下.这用于$.trim()在传入之前减少搜索项,$.grep()以获得所需的前导/尾随空白无效效果.

对于您的编辑,您可以执行此操作,但可以选择"无结果...",请在此处尝试:

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: '' }]);
}