文章/答案/技术大牛

发布

社区首页 >问答首页 >EasyAutocomplete:更改返回值

问EasyAutocomplete:更改返回值
EN

Stack Overflow用户

提问于 2016-08-30 00:13:51

回答 1查看 4K关注 0票数 2

我想使用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文档中找不到任何答案。

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-08-30 03:36:28

您可以结合使用onSelectItemEvent事件和getSelectedItemData方法，用要提交的ID填充一个名为get_value的隐藏输入字段，并从查找输入字段中删除该名称，这样它就不会被提交。

HTML：

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

设置：

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

Demo (点击submit查看get_value=id已提交)：

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

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.themes.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>

<form method="get" id="form-test">
  <input id="provider-file">
  <input type="hidden" id="id-value" name="get_value">
  <input type="submit">
</form>

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39210702

复制

相似问题

问EasyAutocomplete:更改返回值
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问EasyAutocomplete:更改返回值EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问EasyAutocomplete:更改返回值
EN