JQuery自动完成一行数据

时间:2014-10-31 14:16:13

标签: jquery autocomplete

是否有使用JQuery自动完成功能填充多个表单字段的示例?我可以做一个字段位不知道如何处理多列数据。如何处理在自动完成操作中返回多个字段的json字符串?

3 个答案:

答案 0 :(得分:0)

我不确定这是否是你需要的,但你可以试试这个:



$(function() {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
    $(".tags").autocomplete({
        source: availableTags
    });
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<div class="ui-widget">
    <label>Tags: </label>
    <input class="tags">
</div>
<div class="ui-widget">
    <label>Tags: </label>
    <input class="tags">
</div>
<div class="ui-widget">
    <label>Tags: </label>
    <input class="tags">
</div>
<div class="ui-widget">
    <label>Tags: </label>
    <input class="tags">
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

你的问题没有详细说明,所以我只能提供非常一般的帮助......

您可以返回自动填充结果的对象列表。在select回调中,您可以执行从所选项目对象的属性中填写其他表单字段所需的任何其他工作。

答案 2 :(得分:0)

我已经知道了。或者更确切地说,我找到了它。对于我的json字符串中的其他字段,我可以将它们重定向到相应的字段,就像我为下面的解释器ID所做的那样。

$(function() { 
    $('#ac-name').autocomplete({
      source: "do?action=get-interpreter-names",
        minLength: 2,
        select: function(event, ui) {
            $('#ac-name').val(ui.item.label);
            $('#interpreter-id').val(ui.item.value);
            return false; // Prevent the widget from inserting the value.
        },
        focus: function(event, ui) {
            $("#ac-name").val(ui.item.label);
            return false; // Prevent the widget from inserting the value.
        }
    })
});