Question

我已经接管了一家公司的项目，并且一直在研究他们网站的一些需要改进的功能。其中一个功能是它们的搜索功能。但是，我遇到了一些我似乎无法绕过的障碍。

他们的数据库工作方式是他们为一个位置分配一个特定的值，这意味着要搜索该位置，它需要具有该特定值才能使搜索起作用。例如。

Bradford = GB.ENEI.0500

如果我们在表单中使用下拉列表并使用它，那么这不会成为问题：

<option value="GB.ENEI.0500">Bradford</option>

作为选择表单的一部分，但这是不切实际的，因为位置列表在1000（s）中。用户显然不能只输入Bradford，因为数据库没有分配值，因此它不会在搜索中返回任何内容。

为了解决这个恼人的设计，我决定使用自动填充表单，例如，如果用户开始键入Bradford，它会将此建议为用户的搜索词，然后用户选择它并分配价值（GB.ENEI.0500）到布拉德福德。

但这是我的问题出现的地方。我可以将值设置为GB.ENEI.0500，然后将其显示为用户，这对他们来说意味着什么，就他们而言，不是布拉德福德。如果我将值设置为Bradford，它将显示为Bradford给用户，但是它没有采用正确的值并且搜索失败。

以下是我的表单HTML：

<form action="https://example.net/example/Search/Results" method="GET" class="mpatsform" id="SearchForm" name="SearchForm">

    <input type="text" name="Keywords" id="Keywords" class="ico-01" placeholder="e.g. administrator" value=""/>     
    <input type="text" name="Location" id="autocomplete" class="ico-02" placeholder="e.g. bradford" value=""/>

    <button><i class="fa fa-search"></i></button>
</form>

HTML脚本：

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>
<script type="text/javascript" src="js/location-autocomplete.js"></script>

JavaScript（location-autocomplete.js）： 注意我已将其缩短，因为位置数量很多，但布局完全相同。 < / p>

$(function(){
  var locations = [
    { value: '', data: 'All Locations' },
    { value: 'GB.ENEI.0500', data: 'Bradford' },
    ...
    { value: 'GB.ESEL.0000', data: 'Middlesex' },

  ];
});

实际的自动完成工作，它建议值。但我需要它来显示Bradford（不是GB.ENEI.0500），但是当搜索运行时，它会运行该值，而不是Bradford。

有办法做到这一点吗？我在想我的JavaScript布局是我出错的地方？

我尽力解释这一点，但如果您需要任何进一步的信息，请告诉我，我会尽力这样做。

Answer 1

我认为应该这样做。

触发表单提交时。从数据映射中选择值并在提交之前将其替换。因此，请保持所有内容，但在提交之前将字段值替换为正确的值。

像这样。

$("#SearchForm").on("submit", function(){
  $("input[name='Location']").val(REPLACE_WITH_THE_REQUIRED_VALUE);
  return true;
});

Answer 2

我设法找到解决此问题的方法！我想指出并感谢@LukeStoward提醒我JQuery自动完成功能提供onSelect功能，这就是我解决这个问题的方法。

首先，我创建了一个由新div包围的第三个隐藏<input>：

<div id="outputbox">
    <input type="hidden" name="Location" id="outputcontent" />
</div>

然后在同一个JavaScript文件（location-autocomplete.js）中写了以下内容：

$('#autocomplete').autocomplete({
  lookup: locations,
  onSelect: function (suggestion) {
    var theData = $('#outputcontent');
    theData.val(theData.val() + suggestion.data);
  }
});

所以这样做是从我的位置列表中查找数据以及选择值（例如Bradford），然后将变量theData设置为与Bradford相关的数据（GB.ENEI.0500）并设置ID outputcontent的值。

这允许我运行搜索位置，并显示位置的实际名称，但发送到数据库的查询将把它读作与之关联的数据（GB.ENEI.0500 NOT {{1 }}）。

我希望这可以帮助任何有类似问题的人。

自动填充表单 - 将显示文本指定为值

2 个答案: