Question

我想使用EasyAutcomplete插件为用户创建自动完成列表，然后通过GET方法发送与匹配字符串关联的值...而不是匹配的字符串。

使用此代码

    <!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" href="./EasyAutocomplete/easy-autocomplete.min.css"> 
    <link rel="stylesheet" href="./EasyAutocomplete/easy-autocomplete.themes.min.css">
    <script src="./EasyAutocomplete/jquery.easy-autocomplete.min.js"></script> 
</head>
<body>
    <form method="get" action="test.php">
    <input id="provider-file" name="get_value"/>
    <script>
        $(document).ready(function() {
            var options = {
                url: "./EasyAutocomplete/file.json",
                getValue: "name",
                list: {
                    match: {
                        enabled: true
                        }
                    }
                };
            $("#provider-file").easyAutocomplete(options);
        });
    </script>
        <div>
            <a href=""><input type="submit" value="send"/></a>
        </div>
    </form>
</body>
</html>

和具有以下格式的JSON文件

[
{"name":"Bob","id":"1"},
{"name":"David","id":"2"},
{"name":"Steve","id":"3"},
...
]

用户在提交Bob后被重定向到'test.php？get_value = Bob'，而我希望他被重定向到'test.php？get_value = 1'（即发送“id”而不是“name” “）。

有人能帮帮我吗？我在EasyAutocomplete文档中找不到任何答案。

Answer 1

您可以使用{end: false}事件和getSelectedItemData方法使用您要提交的ID填充名为onSelectItemEvent的隐藏输入字段，并从查找输入字段中删除该名称所以它不会被提交。

HTML：

get_value

设定：

<input id="provider-file">
<input type="hidden" id="id-value" name="get_value">

演示（点击提交以查看提交的get_value = id）：

  var options = {
    url: "./EasyAutocomplete/file.json",
    getValue: "name",
    list: {
      onSelectItemEvent: function() {
        var value = $("#provider-file").getSelectedItemData().id; //get the id associated with the selected value
        $("#id-value").val(value).trigger("change"); //copy it to the hidden field
      }
    }
  };

$(document).ready(function() {
  var options = {
    data: [{
      "name": "Bob",
      "id": "1"
    }, {
      "name": "David",
      "id": "2"
    }, {
      "name": "Steve",
      "id": "3"
    }],
    getValue: "name",
    list: {
      onSelectItemEvent: function() {
            var value = $("#provider-file").getSelectedItemData().id; //get the id associated with the selected value
            $("#id-value").val(value).trigger("change"); //copy it to the hidden field
      }
    }
  };
  $("#provider-file").easyAutocomplete(options);

  // used to validate what gets submitted
  $("#form-test").on('submit', function(e) {
    e.preventDefault();
    console.log($(this).serialize());
  });
});

EasyAutocomplete：更改返回值

1 个答案: