1

首先是背景信息：应用程序是一个旧的 .net 框架 1.1 应用程序（当时不支持 json，所以我不得不使用 xml。 由于不值得进入的原因，我无法升级这个特定的应用程序。

我正在尝试将自动完成添加到我网站上的文本框中。但是在输入某些单词后应该会弹出自动完成功能。例如，在一个文本框中，如果我开始输入自动完成功能会弹出。一旦我按下空格键并再次开始输入，那么自动完成功能将再次出现。

我发现了一些很酷的东西，jquery 文档包含的内容与此处的内容完全相同：http: //jqueryui.com/autocomplete/#multiple我已经做了很多他们正在做的事情，但我的自动完成功能没有出现。这是我的jQuery代码：

我的jQuery代码

function split(val) 
{
  return val.split(/\s*/);
}

function extractLast(term) 
{
  return split(term).pop();
}

$("#txtTags").bind( "keydown", function( event ) {
        //parameters for the ajax call.
        var FacilityID = $("#ddlFacility").val();
        var ClientID = $("#ddlClient").val();   
        var params = '{"ClientID":"' + ClientID + '", "FacilityID":"' + FacilityID + '"}';

    // don't navigate away from the field on tab when selecting an item.
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).data( "ui-autocomplete" ).menu.active ) {
          event.preventDefault();
        }
      }).
autocomplete({
        minLength: 1,
        source: function(request, response) {
            $.ajax({
                type: "POST",
                data: params,
                url: "GetTags.asmx/GetTags",
                dataType: "xml",
                contentType: "text/xml; charset=utf-8",
          success: function(xml) {
                var data = [];
                 $(xml).find('string').each(function(){ 
                    data.push($(this).text());
                    });
                //response(data);
                // delegate back to autocomplete, but extract the last term
                response( $.ui.autocomplete.filter(
                        data, extractLast(request.term)));
          },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        }, 
        search: function() {
          // custom minLength
          var term = extractLast( this.value );
          if(typeof(term) !== 'undefined')
            {           
            if (term.length < 1) {
                return false;
            }
          }
        }, 
        focus: function() {
          // prevent value inserted on focus
          return false;
        },
    });

我已尽我所能发表评论，如果您有任何问题，请告诉我。我知道 .asmx Web 服务文件正在返回正确的数据，因为我从 ie / chrome 运行 Web 服务的输出如下：

XML 的结果

    This XML file does not appear to have any style information associated with it. The document tree is shown below.
<ArrayOfString xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://tempuri.org/quikfix.jakah.com/GetTags">
<string>3g</string>
<string>6283</string>
<string>7641</string>
<string>8-id</string>
<string>80070005</string>
<string>active-directory</string>
<string>ad</string>
<string>addin</string>
<string>authentication</string>
<string>badge</string>
<string>batch</string>
<string>boot</string>
</ArrayOfStrings>

无论我在文本框中输入什么内容，我都没有在 chrome 开发人员工具/即工具中看到任何错误。我只是没有得到自动完成功能。我的 jquery 有什么明显的错误吗？

网络服务 (.asmx)

如果有人感兴趣，这里的附加信息是我的网络服务，它只是 vb.net：

Public Function GetTags(ByVal ClientID As Long, ByVal FacilityID As Long) As String()
        Dim arr() As String = BindTags(ClientID, FacilityID)
        Return arr
    End Function
    Public Function BindTags(ByVal ClientID As Long, ByVal FacilityID As Long) As String()
        Dim cmdSelect As SqlCommand
        Dim conMyData As SqlConnection
        Dim reader As SqlDataReader
        Dim myList As New ArrayList

        'try and make a connection   
        Try
            conMyData = New SqlConnection(ConfigurationSettings.AppSettings("strConn"))
            cmdSelect = New SqlCommand("select_tags_grid", conMyData)

            With cmdSelect
                .CommandType = CommandType.StoredProcedure
                'add parameters
                .Parameters.Add("@ClientID", SqlDbType.BigInt).Value = ClientID
                .Parameters.Add("@FacilityID", SqlDbType.BigInt).Value = FacilityID
                .Parameters.Add("@SortOrder", SqlDbType.TinyInt).Value = 4
                'check the clientid
                conMyData.Open()
                reader = cmdSelect.ExecuteReader(CommandBehavior.CloseConnection)
            End With

            While (reader.Read())
                myList.Add(CType(reader("Tag"), String))
            End While

            Dim arr() As String = CType(myList.ToArray(Type.GetType("System.String")), String())
            Return arr
        Catch e As Exception
            'clean up and close resources
            Throw e
        Finally
            cmdSelect = Nothing
            conMyData.Close()
            conMyData = Nothing
        End Try
    End Function

迄今为止的发现

我在这里非常接近，我看到的是如果我从我的 jquery 和我的网络服务中删除参数，即：

  //parameters for the ajax call.
        //var FacilityID = $("#ddlFacility").val();
        //var ClientID = $("#ddlClient").val(); 
        //var params = '{"ClientID":"' + ClientID + '", "FacilityID":"' + FacilityID + '"}';

自动完成正确显示。但是我需要这些参数......所以当我将它们添加回我的 jquery 和我的 web 服务（我的 asmx 文件）时，chrome 会引发内部服务器 500 错误。它说：

System.InvalidOperationException: Request format is invalid: text/xml; charset=utf-8. at System.Web.Services.Protocols.HttpServerProtocol.ReadParameters() at System.Web.Services.Protocols.WebServiceHandler.Invoke() at System.Web.Services.Protocols.WebServiceHandler.CoreProcessRequest()

但我需要 text/xml 类型，因为 .net 1.1 不支持 json。请问有人吗？

4

1 回答 1

1

我知道了！

function split(val) 
    {
      //return val.split(/\s*/);
      return val.split(" ");
    }

    function extractLast(term) 
    {
      return split(term).pop();
    }

        //parameters for the ajax call.
        var FacilityID = $("#ddlFacility").val();
        var ClientID = $("#ddlClient").val();   
        var params = '{"ClientID":"' + ClientID + '", "FacilityID":"' + FacilityID + '"}';

$("#txtTags").bind( "keydown", function( event ) {  
    // don't navigate away from the field on tab when selecting an item.
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).data( "ui-autocomplete" ).menu.active ) {
          event.preventDefault();
        }
      }).
    autocomplete({
        minLength: 1,
        source: function(request, response) {
            $.ajax({
                type: "GET",
                data: "ClientID=" + ClientID + "&FacilityID=" + FacilityID,
                url: "GetTags.asmx/GetTags",
                dataType: "xml",
                contentType: "text/xml; charset=utf-8",
          success: function(xml) {
                var data = [];
                 $(xml).find('string').each(function(){ 
                    data.push($(this).text());
                    });
                //response(data);
                // delegate back to autocomplete, but extract the last term
                response( $.ui.autocomplete.filter(
                        data, extractLast(request.term)));
          },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        }, 
        search: function() {
          // custom minLength
          var term = extractLast( this.value );
          if(typeof(term) !== 'undefined')
            {           
            if (term.length < 1) {
                return false;
            }
          }
        }, 
        focus: function() {
          // prevent value inserted on focus
          return false;
        },
        select: function( event, ui ) 
        {       
            var terms = split(this.value);          
            // remove the current input          
            terms.pop();          
            // add the selected item          
            terms.push(ui.item.value);          
            // add placeholder to get the comma-and-space at the end          
            terms.push("");          
            //add space to each term object
            this.value = terms.join(" ");          
            return false;        
        },
    });
于 2013-04-12T14:48:23.593 回答