1、功能介紹javascript
用戶在搜索框中輸入某個字符,將一週內以這個字符開頭的熱詞聯想出來。css
2、功能設計:前端
一、熱詞明細表java
每次搜索的時候,插入一條數據jquery
CREATE TABLE [dbo].[SearchDetails]( [Id] [uniqueidentifier] NOT NULL,--ID [KeyWords] [nvarchar](255) NOT NULL,--搜索內容 [SearchDateTime] [datetime] NOT NULL,--搜索時間 CONSTRAINT [PK_SearchDetails] PRIMARY KEY CLUSTERED ( [Id] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY]
二、熱詞彙總表sql
使用定時框架Quartz每隔一段時間將明細表搜索時間最近一週的數據彙總到熱詞彙總表當中。app
CREATE TABLE [dbo].[SearchDetails]( [Id] [uniqueidentifier] NOT NULL, [KeyWords] [nvarchar](255) NOT NULL, [SearchDateTime] [datetime] NOT NULL, CONSTRAINT [PK_SearchDetails] PRIMARY KEY CLUSTERED ( [Id] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY]
三、客戶在搜索時使用jQueryUI框架中的Autocomplete框架
3、功能開發ide
建立一個控制檯項目完成定時器的一些建立初始化ui
class Program { static void Main(string[] args) { IScheduler sched; ISchedulerFactory sf = new StdSchedulerFactory(); sched = sf.GetScheduler(); JobDetail job = new JobDetail("job1", "group1", typeof(IndexJob));//IndexJob爲實現了IJob接口的類 DateTime ts = TriggerUtils.GetNextGivenSecondDate(null, 5);//5秒後開始第一次運行 TimeSpan interval = TimeSpan.FromSeconds(5);//每隔1小時執行一次 Trigger trigger = new SimpleTrigger("trigger1", "group1", "job1", "group1", ts, null, SimpleTrigger.RepeatIndefinitely, interval);//每若干小時運行一次,小時間隔由appsettings中的IndexIntervalHour參數指定 sched.AddJob(job, true); sched.ScheduleJob(trigger); sched.Start(); Console.ReadKey(); } }
而後實現三個方法
/// <summary> /// 將統計的明細表的數據插入。 /// </summary> /// <returns></returns> public bool InsertKeyWordsRank() { string sql = "insert into KeyWordsRank(Id,KeyWords,SearchCount) select newid(),KeyWords,count(*) from SearchDetails where DateDiff(day,SearchDetails.SearchDateTime,getdate())<=7 group by SearchDetails.KeyWords"; return this.db.Database.ExecuteSqlCommand(sql) > 0; } /// <summary> /// 刪除彙總中的數據。 /// </summary> /// <returns></returns> public bool DeleteAllKeyWordsRank() { string sql = "truncate table KeyWordsRank"; return this.db.Database.ExecuteSqlCommand(sql) > 0; } /// <summary> /// 獲取熱詞 /// </summary> /// <param name="term"></param> /// <returns></returns> public List<string> GetSearchMsg(string term) { //KeyWords like term% string sql = "select KeyWords from KeyWordsRank where KeyWords like @term"; return this.db.Database.SqlQuery<string>(sql, new SqlParameter("@term", term + "%")).ToList(); }
在IndexJob中調用
public class IndexJob : IJob { public IKeyWordsRankService keyWordsRankService { get; set; } void IJob.Execute(JobExecutionContext context) { keyWordsRankService.DeleteAllKeyWordsRank(); keyWordsRankService.InsertKeyWordsRank(); } }
在每次搜索的時候插入明細表,這步比較簡單我就不貼代碼了
而後就是前端了,引用的順序不要反了,先引用jQuery,再引用jQueryUI
<script src="~/Scripts/jquery-1.7.1.min.js"></script> <script src="~/Scripts/jquery-ui-1.8.20.min.js"></script> <link href="~/Content/themes/jquery-ui.css" rel="stylesheet" /> </style> .ui-autocomplete-loading { background: white url('/Content/images/ui-anim_basic_16x16.gif') right center no-repeat; } </style> <script type="text/javascript"> jQuery(function ($) { $(function () { $("#condition").autocomplete({ source: "/Search/AutoComplete" }); }); }); </script>
<form method="get" action="/Search/SearchContent">
<input type="text" name="condition" id="condition" />
<input type="submit" name="btnSearch" value="搜一搜" />
@*<input type="submit" name="btnCreate" value="建立索引" />*@
</form>
調試的時候要把控制檯程序一直運行
這裏其實還有個搜索的功能,我就不說了。
最後貼一下結果
我加了個讓線程等待五秒,因此就能看到這個小圈圈了