Jquery Autocomplete不起作用

时间:2014-03-21 11:19:37

标签: javascript asp.net vb.net autocomplete jquery-autocomplete

我正在尝试使用数据库中的自动完成源向输入框(我在asp.net/vb.net项目中)添加自动完成功能。 所以我创建了一个web服务,我做了一个ajax调用:

<script type="text/javascript">
            $(document).ready(function () {

                $('#modelloInput').autocomplete({

                    source: function (request, response) {
                        $.ajax({
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            url: "WebServices/AutocompleteWS.asmx/getTuttiIModelli",
                            data: "{'prefix':'" + request.term + "'}",
                            dataType: "json",
                            async: true,
                            success: function (data) {
                                response(data.d);
                            },
                            error: function (result) {
                                //alert("Error");
                            }
                        });
                    }

                });
            }); 
</script>

<input type=text  id="modelloInput" />

现在,当我运行应用程序并在输入框中写入内容时,我在自动完成框中获得了整个列表。 我可以写一切,但我总是得到整个元素列表。

为什么?

1 个答案:

答案 0 :(得分:1)

我认为您的网络服务代码中必定存在一些问题,

您可以将此基本代码用于autoComplete,

$( "input.suggest-user" ).autocomplete({
  source: function( request, response ) {

    $.ajax({
        dataType: "json",
        type : 'Get',
        url: 'yourURL',
        success: function(data) {
          $('input.suggest-user').removeClass('ui-autocomplete-loading');  // hide loading image

        response( $.map( data, function(item) {
            // your operation on data
        }));
      },
      error: function(data) {
          $('input.suggest-user').removeClass('ui-autocomplete-loading');  
      }
    });
  },
  minLength: 3,
  open: function() {

  },
  close: function() {

  },
  focus:function(event,ui) {

  },
  select: function( event, ui ) {

  }
});

OR

$("#id").autocomplete(
{
search: function () {},
source: function (request, response)
{
    $.ajax(
    {
        url: ,
        dataType: "json",
        data:
        {
            term: request.term,
        },
        success: function (data)
        {
            response(data);
        }
    });
},
minLength: 2,
select: function (event, ui)
{
    var test = ui.item ? ui.item.id : 0;
    if (test > 0)
    {}
}
});