Javascript jQuery UI自动完成项和id

我有下面的脚本，它可以处理一维数组。有没有可能让它与二维数组一起工作？然后，通过单击页面上的第二个按钮，无论选择哪个项目，都应显示所选项目的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);
});

---

您需要使用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"]];

---

在此处阅读有关如何使用多维数组的更多信息：

来自jQuery autocomplete插件的Overview选项卡：

本地数据可以是一个简单的数组 或它包含的对象 数组中的每个项，具有 标签或值属性或两者。这个 标签特性将显示在 建议菜单。价值将是 插入到输入元素之后 用户从列表中选择了一些内容 菜单如果只有一个属性是 指定时，它将用于， 如果你只提供 值属性，该值也将 用作标签

所以你的二维数组看起来像：

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参数访问和事件中的标签和值属性

编辑

似乎您必须取消焦点并选择事件，以便它不会将id号放在文本框中。执行此操作时，可以将值复制到隐藏变量中

上面的回答有帮助，但在我的实现中没有起作用。 我没有使用jQuery设置值，而是将值从函数返回到select选项

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

---

将列表传递到JavaScript序列化程序中，并返回响应。

我的代码只有在向select函数添加“return false”时才起作用。如果没有此选项，则在select函数中使用正确的值设置输入，然后在select函数结束后将其设置为id值。返回错误解决了这个问题

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

---

用户输入ja并使用autocomplete选择“java”选项，我将值2存储在隐藏字段中。如果用户从“java”中删除一个字母，por example在输入字段中以“jva”结尾，我无法将id 2传递给我的代码，因为用户更改了该值。在本例中，我将id设置为0。

只想分享我这方面的工作，以防它也能帮助其他人。或者，根据Paty Lustosa上面的回答，请允许我添加另一种源于此站点的方法，他在源方法中使用了ajax方法

kicker是从下面的php脚本列表中得到的字符串或json格式。php派生要在自动完成字段中显示的结果集应如下所示：

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

---

希望这有助于。。。祝你一切顺利

我认为没有必要绕过值和标签属性，使用隐藏的输入字段或抑制事件。您可以将自己的自定义属性添加到每个自动完成对象，然后稍后读取该属性值

这里有一个例子

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

您必须在具有标签和值属性的对象数组中传递提及。但是，您当然可以传入具有以上两个属性的对象，并在以后读取它们

这是我所指的有关部分

数组：数组可用于本地数据。有两种支持 格式：字符串数组：[Choice1，Choice2]字符串数组 具有标签和值属性：[{label:Choice1，值： value1}，…]标签属性显示在建议中 菜单当用户 选择一个项目。如果只指定了一个属性，则将使用它 对于两者，例如，如果仅提供值属性，则值将 也可用作标签

---

这可以在不使用隐藏字段的情况下完成。您必须利用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
}); 

---

最后，我做到了这一点，感谢很多朋友，特别感谢Mr，因为他的代码，我能够正确地解决它。最后，当我使用groovy grails时，我的代码看起来是这样的，我希望这将有助于其他人。。非常感谢

html代码在我的gsp页面中如下所示

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

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

脚本函数在我的gsp页面中是这样的

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

  <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替换为html中第二个输入项的文本

---

谢谢

我试过上面的代码显示 将文本框中的值或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);
    }
});

---

假设源数组中的对象具有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;
});

使用Jquery自动完成文本框绑定 返回数据的格式应低于

---

因此，如果没有隐藏的输入，这是不可能的？不可能，因为有两段数据：文本和id。您不能将两者都放入一个输入中。您通常不想将id显示给用户，因此需要输入type=hidden才能进入。我尝试了这个脚本，当我在txtAllowSearch输入字段中键入内容时，我得到了一个空白下拉列表。我尝试了标签和值，但没有区别，当我在txtAllowSearch中键入内容时，我仍然得到了一个空白下拉列表。但是，如果我使用Salman A提到的数组样式，我不会得到一个空白下拉列表，但我最终会遇到问题，将id插入txtAllowSearch而不是值，必须使用value和id，并且必须使用带有标签value和id的Salman样式数组。所以不使用隐藏的输入字段是不可能的吗？txtAllowSearch在字段中，是吗？如果是这样，那么$txtAllowSearch.val将为您提供id号，而不是标签文本，因为用户已经输入了一些内容。问题是，如果我使用上面的数组，当我从autocomplete输入字段中单击某个项目时，它会将值放入txtAllowSearch字段而不是标签。是否可以使用元素来代替？是，只要我能用自动完成就行了？链接很完美。在选择标签后，我努力将其保留在文本字段中，因此Thanksame也发生在我身上。return false成功了。谢谢

  ## 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>

$("#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