javascript - 如何使用 jquery 自动完成不同的值

Question

这是我的代码

<script>  
  $(function() {
    var availableTags1 = [
  {"key": "1","name": "NAME 1"},{"key": "2","name": "NAME 2"},{"key": "3","name": "NAME 3"}
   ];
   var availableTags2=[
   {"key":"22","value":"Ahmedabad"},{"key":"23","value":"Bangalore"},{"key":"24","value":"Chandigarh"},{"key"
:"25","value":"Chennai"}];

    $( "#project-name" ).autocomplete({
      minLength: 0,
      source: availableTags2,
      select: function( event, ui ) {
        $("#project-name").val( ui.item.value );
      } 
    });
  });
</script>
<input id="project-name" name="project2" />

如果我们使用availableTags2它工作正常。但是如果我们使用 availableTags1 则不起作用。我也改成了 $("#project-name").val( ui.item.name );。但它没有显示任何内容。

Answer 1

用值更改此名称

旧:

var availableTags1 = [
{"key": "1","name": "NAME 1"},{"key": "2","name": "NAME 2"},{"key": "3","name": "NAME 3"}
];

新:

 var availableTags1 = [
{ "key": "1", "value": "NAME 1" }, { "key": "2", "value": "NAME 2" }, {   "key": "3", "value": "NAME 3" }
 ];

select 当我们从列表中选择任何标签时调用事件调用

这是一个例子，用json处理，用ajax调用(api调用)

$('#selcloter').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "url",
            data: "{ 'inputdate': '" + request.term + "' }",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
                response($.map(data.d, function (item) {
                    return {
                        label: item.name,
                        value: item.name,
                       //this is custom tag, can give any name
                        keyvalue: item.key 
                    }
                }));
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    },
    minLength: 2,
    select: function (event, ui) {
        $(this).val(ui.item.value)
        $('#HiddenFieldtosavekey').val(ui.item.KeyValue);
    },
    open: function () {
        $(this).autocomplete("widget").css({
            "width": 400
        });
        $(this).autocomplete('widget').zIndex(100002);
    },
    close: function () {
        //$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
    }
});