自动完成的jQuery删除'-'之后的所有内容

Question

我使用简单的JQUERY自动完成功能来显示某些记录的可能重复项，例如用户填写文本字段时的名称或地址。

这里的代码

<script type="text/javascript">
                $(function() {
                    var availableTags = <?php include('ajax/ajax_show.php'); ?>;
                    $("#name_value").autocomplete({
                        source: availableTags,
                        autoFocus:true
                    });
                });
            </script>

文本下方是显示结果。

Name[____________________]
 Paul - 121.456.789-00
 Robert - 122.456.789-00
 Cid - 123.456.789-00

如何删除所有之后的字符- （空格连字符空间）及其后的所有内容，并且在文本字段中仅具有Paul，Robert或Cid之类的名称？

Answer 1

如果您无法更改ajax/ajax_show.php来以所需的方式为您提供数据，则其中之一是使用RegEx并将-之后的所有内容替换为javascript。

$(function() {
  var availableTags = <?php include('ajax/ajax_show.php'); ?>;
  $("#name_value").autocomplete({
    source: availableTags.map(function(v) { return v.replace(/(^[^-]*) .*/, '$1') }),
    autoFocus:true
   });
 });

基本上，此解决方案是使用map函数迭代所有元素，并使用“清除”的元素创建一个新 array 。 方法replace将使用正则表达式(^[^-]*) .*来获取破折号之前的所有内容。

如果需要更具体的信息，可以使用正则表达式，另一个可行的示例是：/ /^(.*) - .*$/

Answer 2

如果可能的话，我认为最好从ajax_show.php作为json返回数据，例如：

[
  {
   "value": "121.456.789-00",
   "label": "Paul"
  },
  {
   "value": "122.456.789-00",
   "label": "Robert"
  },
  ... 
]

然后，如此处的jQuery UI文档所示： https : //jqueryui.com/autocomplete/#custom-data （在“自定义数据和显示”标签下），它将仅使用名称作为标签，但是您将仍然有权访问ID（值属性）。

而且，作为一个好消息，传递数据的方式（通过将其分配给'source'属性）根本不需要改变。

Answer 3

要简单地删除数字并在输入框中显示名称，可以使用substr和indexOf （或者可以使用正则表达式并根据需要replace ）。 像这样：

$( "#name_value" ).autocomplete({
    select: function( event, ui ) {
        $('#myInputBox').text(ui.item.value.substr(0, ui.item.value.indexOf(" - ")));
    }
});    

您可能需要在此处和此处查找这两个功能，以了解其工作原理。