如何在自动完成文本框 jquery 中使用数组？

Question

例如

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
    $(function() { 
        var availableTags = [ "ActionScript", "AppleScript", "Asp"];
        var availableTagsCode = ["1", "2", "3"]; 
        $( "#tags" ).autocomplete({ source: availableTags });
    });
</script>

<input id="tags" name="name">
<input id="tags_code" name="code">

实际上，我尝试使用以下代码更改代码，同时 select 建议：

$("#tags_code").val(availableTagsCode);

我需要 select 建议测试我是否将 select 0 标签中的第 0 个数组分配给 name="code" 文本框。
请帮我解决这个问题。

Answer 1

设置select事件处理器

$(function() {
  var availableTags = ["ActionScript", "AppleScript", "Asp"];
  var availableTagsCode = ["1", "2", "3"];
  $("#tags").autocomplete({
    source: availableTags,
    select: function(e, ui) {
      $('#tags_code').val(availableTagsCode[availableTags.indexOf(ui.item.value)]);
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input id="tags" name="name">
<input id="tags_code" name="code">

Answer 2

您可以定义一个 select 事件处理程序：

$( "#tags" ).autocomplete({ 
    source: availableTags,
    select: function(event, ui) {
        var index = availableTags.indexOf(ui.item.value);
        $("#tags_code").val(availableTagsCode[index]);  
    }
});

这里是 working JSFiddle demo.

实际上，jQuery UI 允许您在提供 source.[=33 时使用具有 value 和 label 属性的对象数组=] 所以，像这样的东西会工作并且看起来更好：

var tags = [
    {"label": "ActionScript", "value": 1},
    {"label": "AppleScript", "value": 2},
    {"label": "Asp", "value": 3}
];

$( "#tags" ).autocomplete({ 
    source: tags,
    select: function (event, ui) {
        $("#tags_code").val(ui.item.value);  
    }
});

JSFiddle demo for the second approach.

如果不想选择后值被替换，可以使用自定义属性代替value:

var tags = [
    {"label": "ActionScript", "code": 1},
    {"label": "AppleScript", "code": 2},
    {"label": "Asp", "code": 3}
];

$( "#tags" ).autocomplete({ 
    source: tags,
    select: function (event, ui) {
        $("#tags_code").val(ui.item.code);  
    }
});

JSFiddle demo.

Answer 3

<script type="text/javascript">  
    $(document).ready(function () {
        $("#textBoxID").autocomplete({
            source: function (request, responce) {
                $.ajax({
                    url: "webservice_Name.asmx/webservice_functionName",
                    method: "post",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify({ parameterName: request.term }),
                    dataType: 'json',
                    success: function (data) {

                        responce(data.d);
                        if (data.d.length > 0)
                            $('#spnError').text("");
                        else
                            $('#spnError').text("Not Matching Any Result");
                        console.log(data.d.length);
                    },
                    error: function (err) {
                        alert(err);
                    }
                });
            },
            minLength: 2,
            select: function (event, ui) {
                console.log("You selected: " + ui.item.label);
                $.ajax({
                    url: "webservice_Name.asmx/webservice_functionNameForgetID",
                    method: "post",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify({ parameterName: ui.item.label }),
                    dataType: 'json',
                    success: function (data) {
                        console.log(data.d);

                    },
                    error: function (err) {
                        alert(err);
                    }
                });
            }
        });
    });
</script>

如何在自动完成文本框 jquery 中使用数组？

How to use array in autocomplete textbox jquery?

javascript

jquery

textbox

autocomplete