JS第二篇——自动运行JS方法&Autocomplete

最新推荐文章于 2022-10-17 12:33:52 发布

原创最新推荐文章于 2022-10-17 12:33:52 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #javascript #xhtml #ViewUI

我也写界面专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在ASP.NET环境中利用jQuery的Autocomplete插件实现输入框的自动补全功能。通过读取XML配置文件获取补全选项，并将这些选项传递给Autocomplete插件。

[我有废话要说]
开始写ASP，其实不太喜欢.Net的东西。。。不过比较喜欢写JS,也想学下JQuery~就这样吧~

[正文——把JQuery的Autocomplete封了大家调]

需求：

1提供公用的js文件，传入formId和字符数组，输入时，可以根据字符数组在form上autoComplete。

2该字符数组从配置文件中读取

part1:读取xml配置文件，放在Hashtable中：

//公共方法，读取配置文件。
using System;
using System.Xml;
using System.Collections;
namespace com.Origin.Base.test
{
    public static class ReadProperty
    {
        public static Hashtable ht = null;
        private static String  path = "D://property.xml";
    
        public static string getText(string text)
        {
            if(ht==null){
                init();
            }
            return (string)ht[text];
        }

        public static void init()
        {
            ht = new Hashtable();
            string strXmlPath = path;
            XmlDocument xDoc = new XmlDocument();
            xDoc.Load(@strXmlPath);

            //node数量
            int count = xDoc.DocumentElement.ChildNodes.Count;
            //遍历所有的node
            for (int k = 0; k < count; k++)
            {
                XmlElement pressEle = (XmlElement)xDoc.DocumentElement.ChildNodes[k];
                XmlElement pressEleKey;
                XmlElement pressEleValue;
                pressEleKey = (XmlElement)pressEle.ChildNodes[0];
                pressEleValue = (XmlElement)pressEle.ChildNodes[1];
                string key = pressEleKey.FirstChild.Value;
                string value = pressEleValue.FirstChild.Value;
                ht.Add(key, value);
            }
        }
       
    }
}

注释：加上@标示绝对路径。

@strXmlPath

xml文件格式：

<list>
   <node>
   	<key>language</key>
        <value>java,oralce,jajaja,javascript,vb</value>
   </node>
</list>

part2：我的asp的cs文件，调用上面的类：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace com.Origin.Base.test
{
    public partial class TestWeb : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

         }
     
        public static string getText(string s)
        {
            string properties = ReadProperty.getText(s);
            return properties;
        }
    }
}

注释：提供getText方法，共界面asp调用。

asp调用该方法和我们的js公有库。

JS文件：

//test.js
function fun(formId, availableTags) {
        alert('in fun');
		$(formId).autocomplete({
			source: availableTags
		});
}

最后是asp的界面文件：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="com.Origin.Base.test.TestWeb" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<meta charset="utf-8">
	<title>jQuery UI Autocomplete - Default functionality</title> 
    <script type="text/javascript" src="test.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="Scripts/ui/jquery.ui.position.js"></script>
    <script type="text/javascript" src="Scripts/ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="Scripts/ui/jquery.ui.core.js"></script>
     <script type="text/javascript" src="Scripts/ui/jquery.ui.autocomplete.js"></script>  

	<script type="text/javascript">
          $(function () {
              var v1 = '<%=getText("language")%>';
	        alert(v1);
	        v = v1.split(",");
	        fun("#tags", v);
	    });
	</script>

</head>

<body>

<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags" />
</div>

<!-- End demo -->
</body>
</html>

注释： $(function (){});会让function中的内容立即执行。

【各种报错录】

1。$(formId).autocomplete is not a function

solution：把jquery的js文件引入放在一堆scrpt的引入的最后即解决。JS的引入是又顺序的，童鞋们注意。

2。字符文本的字符太多

var v1 = '<%=getText(" language" )%>';

solution：上面的双引号写成了单引号。。不靠大家spread the world 的精神，还真不知道.NET报的个啥错。

附件是用到的jquery文件。