带有项目和 ID 的 jQuery UI 自动完成

Question

我有以下与一维数组一起使用的脚本。是否有可能让它与二维数组一起使用？然后，通过单击页面上的第二个按钮，无论选择哪个项目，都应该显示所选项目的 ID。

这是一维数组的脚本：

var $local_source = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"];
$("#txtAllowSearch").autocomplete({
    source: $local_source
});

这是按钮检查id的脚本，不完整：

$('#button').click(function() {
    // alert($("#txtAllowSearch").someone_get_id_of_selected_item);
});

Answer 1

您需要使用 ui.item.label（文本）和 ui.item.value（id）属性

$('#selector').autocomplete({
    source: url,
    select: function (event, ui) {
        $("#txtAllowSearch").val(ui.item.label); // display the selected text
        $("#txtAllowSearchID").val(ui.item.value); // save selected id to hidden input
    }
});

$('#button').click(function() {
    alert($("#txtAllowSearchID").val()); // get the id from the hidden input
}); 

[编辑] 你还问如何创建多维数组...

你应该可以像这样创建数组：

var $local_source = [[0,"c++"], [1,"java"], [2,"php"], [3,"coldfusion"], 
                     [4,"javascript"], [5,"asp"], [6,"ruby"]];

在此处阅读有关如何使用多维数组的更多信息：http://www.javascriptkit.com/javatutors/literal-notation2.shtml

Answer 2

来自 jQuery 自动完成插件的概览选项卡：

本地数据可以是一个简单的数组 字符串，或者它包含对象 数组中的每个项目，其中一个 标签或值属性或两者兼而有之。这 标签属性显示在 建议菜单。该值将是 插入到输入元素之后 用户从 菜单。如果只有一个属性 指定，它将用于两者， 例如。如果您只提供 价值属性，价值也将 用作标签。

所以你的“二维”数组可能看起来像：

var $local_source = [{
    value: 1,
    label: "c++"
}, {
    value: 2,
    label: "java"
}, {
    value: 3,
    label: "php"
}, {
    value: 4,
    label: "coldfusion"
}, {
    value: 5,
    label: "javascript"
}, {
    value: 6,
    label: "asp"
}, {
    value: 7,
    label: "ruby"
}];

您可以使用ui.item.label 和ui.item.value 通过ui 参数访问focus 和select 事件中的标签和值属性。

编辑

似乎您必须“取消”焦点并选择事件，以便它不会将 ID 号放在文本框中。这样做时，您可以将值复制到隐藏变量中。 Here is an example.

Answer 3

我的代码只有在我将“return false”添加到选择函数时才有效。没有这个，输入在 select 函数中设置了正确的值，然后在 select 函数结束后将其设置为 id 值。 return false 解决了这个问题。

$('#sistema_select').autocomplete({

    minLength: 3,
    source: <?php echo $lista_sistemas;?> ,
    select: function (event, ui) {
         $('#sistema_select').val(ui.item.label); // display the selected text
         $('#sistema_select_id').val(ui.item.value); // save selected id to hidden input
         return false;
     },
    change: function( event, ui ) {
        $( "#sistema_select_id" ).val( ui.item? ui.item.value : 0 );
    } 
});

此外，我在 change 事件中添加了一个函数，因为如果用户在输入中写入内容或在选择一个项目后擦除项目标签的一部分，我需要更新隐藏字段以便我不会t 得到错误的（过时的）ID。例如，如果我的来源是：

var $local_source = [
       {value: 1,  label: "c++"}, 
       {value: 2,  label: "java"}]

并且用户键入 ja 并选择带有自动完成功能的“java”选项，我将值 2 存储在隐藏字段中。如果用户从“java”中删除一个字母，例如在输入字段中以“jva”结尾，我无法将 id 2 传递给我的代码，因为用户更改了值。在这种情况下，我将 id 设置为 0。

Answer 4

只是想分享对我有用的东西，以防它也能帮助其他人。或者根据上面 Paty Lustosa 的回答，请允许我添加从该站点派生的另一种方法，他在源方法中使用了 ajax 方法

http://salman-w.blogspot.ca/2013/12/jquery-ui-autocomplete-examples.html#example-3

踢脚线是从您的 php 脚本（下面的 list.php）中生成的“字符串”或 json 格式，它派生要显示在自动完成字段中的结果集应该如下所示：

    {"list":[
     {"value": 1, "label": "abc"},
     {"value": 2, "label": "def"},
     {"value": 3, "label": "ghi"}
    ]}

然后在自动完成方法的源代码部分：

    source: function(request, response) {
        $.getJSON("listing.php", {
            term: request.term
        }, function(data) {                     
            var array = data.error ? [] : $.map(data.list, function(m) {
                return {
                    label: m.label,
                    value: m.value
                };
            });
            response(array);
        });
    },
    select: function (event, ui) {
        $("#autocomplete_field").val(ui.item.label); // display the selected text
        $("#field_id").val(ui.item.value); // save selected id to hidden input
        return false;
    }

希望这对您有所帮助……一切顺利！

Answer 5

假设源数组中的对象有一个 id 属性...

var $local_source = [
    { id: 1, value: "c++" },
    { id: 2, value: "java" },
    { id: 3, value: "php" },
    { id: 4, value: "coldfusion" },
    { id: 5, value: "javascript" },
    { id: 6, value: "asp" },
    { id: 7, value: "ruby" }];

获取当前实例并检查其 selectedItem 属性将允许您检索当前选择项的属性。在这种情况下，提醒所选项目的 id。

$('#button').click(function() {
    alert($("#txtAllowSearch").autocomplete("instance").selectedItem.id;
});

Answer 6

<script type="text/javascript">
$(function () {
    $("#MyTextBox").autocomplete({
        source: "MyDataFactory.ashx",
        minLength: 2,
        select: function (event, ui) {
            $('#MyIdTextBox').val(ui.item.id);
            return ui.item.label;
        }
    });
});

上述回复有所帮助，但在我的实施中不起作用。 我没有使用 jQuery 设置值，而是将值从函数返回到选择选项。

MyDataFactory.ashx 页面有一个具有三个属性 Id、Label、Value 的类。

将 List 传递给 JavaScript 序列化程序，并返回响应。

Answer 7

我认为没有必要破解 value 和 label 属性，使用隐藏的输入字段或抑制事件。您可以将自己的自定义属性添加到每个 Autocomplete 对象，然后再读取该属性值。

这是一个例子。

$(#yourInputTextBox).autocomplete({
    source: function(request, response) {
        // Do something with request.term (what was keyed in by the user).
        // It could be an AJAX call or some search from local data.
        // To keep this part short, I will do some search from local data.
        // Let's assume we get some results immediately, where
        // results is an array containing objects with some id and name.
        var results = yourSearchClass.search(request.term);

        // Populate the array that will be passed to the response callback.
        var autocompleteObjects = [];
        for (var i = 0; i < results.length; i++) {
            var object = {
                // Used by jQuery Autocomplete to show
                // autocomplete suggestions as well as
                // the text in yourInputTextBox upon selection.
                // Assign them to a value that you want the user to see.
                value: results[i].name;
                label: results[i].name;

                // Put our own custom id here.
                // If you want to, you can even put the result object.
                id: results[i].id;
            };

            autocompleteObjects.push(object);
        }

        // Invoke the response callback.
        response(autocompleteObjects);
    },
    select: function(event, ui) {
        // Retrieve your id here and do something with it.
        console.log(ui.item.id);
    }
});

documentation 提到您必须传入具有标签和值属性的对象数组。但是，您当然可以传入比这两个属性更多的对象，然后再阅读它们。

这是我所指的相关部分。

数组：数组可用于本地数据。有两种支持 格式：字符串数组：[ "Choice1", "Choice2" ] 具有标签和值属性的对象： [ { label: "Choice1", value: "value1" }, ... ] 标签属性显示在建议中 菜单。当用户访问时，该值将插入到输入元素中 选择一个项目。如果只指定了一个属性，它将被使用 对于两者，例如，如果您仅提供值属性，则该值将 也可以作为标签使用。

Answer 8

终于我做到了，感谢很多朋友，特别感谢https://stackoverflow.com/users/87015/salman-a先生，因为他的代码我能够正确解决它。最后我的代码看起来像这样，因为我正在使用 groovy grails 我希望这会帮助那里的人。非常感谢

html 代码在我的 gsp 页面中是这样的

  <input id="populate-dropdown" name="nameofClient" type="text">
  <input id="wilhaveid" name="idofclient" type="text">

脚本功能在我的gsp页面中是这样的

  <script>
        $( "#populate-dropdown").on('input', function() {
            $.ajax({
                url:'autoCOmp',
                data: {inputField: $("#populate-dropdown").val()},
                success: function(resp){
                    $('#populate-dropdown').autocomplete({
                        source:resp,
                        select: function (event, ui) {
                            $("#populate-dropdown").val(ui.item.label);
                            $("#wilhaveid").val(ui.item.value);
                             return false;
                        }
                    })
                }
            });
        });
    </script>

而我的控制器代码是这样的

   def autoCOmp(){
    println(params)
    def c = Client.createCriteria()
    def results = c.list {
        like("nameOfClient", params.inputField+"%")
    }

    def itemList = []
    results.each{
        itemList  << [value:it.id,label:it.nameOfClient]
    }
    println(itemList)
    render itemList as JSON
}

还有一件事我没有将 id 字段设置为隐藏，因为起初我正在检查我是否获得了确切的 id，您可以将其隐藏，只需将 type=hidden 而不是 text 用于 html 中的第二个输入项

谢谢！

Answer 9

我已经尝试在标签文本的文本框中显示上述代码（值或 ID）。之后我尝试了 event.preventDefault() 它工作得很好......

var e = [{"label":"PHP","value":"1"},{"label":"Java","value":"2"}]

$(".jquery-autocomplete").autocomplete({
    source: e,select: function( event, ui ) {
        event.preventDefault();
        $('.jquery-autocomplete').val(ui.item.label);
        console.log(ui.item.label);
        console.log(ui.item.value);
    }
});

Answer 10

这可以在不使用隐藏字段的情况下完成。您必须利用 JQuerys 在运行时创建自定义属性的能力。

('#selector').autocomplete({
    source: url,
    select: function (event, ui) {
        $("#txtAllowSearch").val(ui.item.label); // display the selected text
        $("#txtAllowSearch").attr('item_id',ui.item.value); // save selected id to hidden input
    }
});

$('#button').click(function() {
    alert($("#txtAllowSearch").attr('item_id')); // get the id from the hidden input
}); 

Answer 11

使用 Jquery 自动完成文本框绑定

  ## HTML Code For Text Box and For Handling UserID use Hidden value ##
  <div class="ui-widget">
@Html.TextBox("userName")  
    @Html.Hidden("userId")
    </div>

---

以下库是必需的

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

---

jQuery 脚本

$("#userName").autocomplete(
{

    source: function (request,responce)
    {
        debugger
        var Name = $("#userName").val();

        $.ajax({
            url: "/Dashboard/UserNames",
            method: "POST",
            contentType: "application/json",
            data: JSON.stringify({
                Name: Name

            }),
            dataType: 'json',
            success: function (data) {
                debugger
                responce(data);
            },
            error: function (err) {
                alert(err);
            }
        });
    },
    select: function (event, ui) {

        $("#userName").val(ui.item.label); // display the selected text
        $("#userId").val(ui.item.value); // save selected id to hidden input
        return false;
    }
})

返回数据应低于格式

---

 label = u.person_full_name,
 value = u.user_id