如何对不同的值使用jquery自动完成功能 [英] How to use jquery autocomplete for different values

问题描述

这是我的代码

<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 );.但是它什么也没显示.

if we use availableTags2 its working fine. But if we use availableTags1 not working. I also changed into $("#project-name").val( ui.item.name );. But its not displaying anything.

推荐答案

使用值更改此名称

旧:

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 event call when we select any label from list, on selection

这是一个示例，使用json处理，并使用ajax调用(api调用)

This is an example, handle with json, with ajax call(api call)

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

这篇关于如何对不同的值使用jquery自动完成功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！