ASP.Net 에서 영문 복합 검색 텍스트 상자 실현 사고 및 코드

11095 단어 중 영문검색 하 다.텍스트 상자
얼마 전에 사용자 부서 의 관리 페이지 를 작성 하려 면 배경 에서 얻 은 사용자 데이터 에 대해 영 한 검색 기능 을 실현 해 야 합 니 다.　

또한 옵션 을 선택 한 후 이벤트 와 배경 상호작용 을 촉발 하여 사용자 가 있 는 부 서 를 페이지 오른쪽 에 있 는 ListBox 컨트롤 에 표시 해 야 합 니 다.
   
 
1.Dojo 의 Filtering Select 구성 요소 가 병 음 검색 기능 을 실현 합 니 다.
인터넷 상에 서 많은 관련 소개 가 있 는데 그 중에서 비교적 전형 적 인 것 은'해적 난 어'의 Dojo 재 작성 Filtering Select 구성 요소 가 병 음 검색 기능 을 실현 하 는 데 관 한 소개(주소)이다.http://cosbor.web-144.com/?p=38、http://cosbor.web-144.com/?p=52）。작가 의 Demo 배경 과 pinyin4j 의 jar 패 키 지 는 모두 자바 플랫폼 을 바탕 으로 하기 때문에 저 는 약간의 시간 을 들 여 현재.Net 플랫폼 에서 Filtering Select 선택 이벤트 의 등록 을 성공 적 으로 실현 하 였 습 니 다.실현 원 리 는'해적 난 어'블 로그 의 분석 을 상세 하 게 참고 하 시기 바 랍 니 다.여 기 는'Net 플랫폼 에서 의 실현 방향 에 대해 간략하게 설명 하고 소스 코드 를 붙 여 참고 하 시기 바 랍 니 다.(여기 서 작가 가 제공 한 사고 에 감 사 를 드 립 니 다!)
우선 Dojo 도 구 를 도입 하여 dojo 디 렉 터 리 에"test"폴 더 를 추가 하고 FilteringSelect.js 파일 을 새로 만 듭 니 다.다음 그림:

Filtering Select.js 파일 의 역할 은 Filtering Select 구성 요 소 를 다시 쓰 는 것 입 니 다.'해적 의 난 어'의 블 로그 에 제 시 된 코드 목록 입 니 다.다음 과 같이 전달 할 수 있 도록 합 니 다

define([ 
"dojo/_base/declare", // declare, 
"dojo/dom-attr", // domAttr.get 
"dijit/form/FilteringSelect" 
], function(declare, domAttr ,FilteringSelect){ 

return declare("test.FilteringSelect", [FilteringSelect], { 

displayValueAttr:null, //         ，    FilteringSelect textbox             

// summary: 
//   dijit.form._AutoCompleterMixin     ， FilteringSelect  displayValueAttr  textbox      ，       searchAttr        
_announceOption: function(/*Node*/ node){ 

if(!node){ 
return; 
} 
// pull the text value from the item attached to the DOM node 
var newValue; 
if(node == this.dropDown.nextButton || 
node == this.dropDown.previousButton){ 
newValue = node.innerHTML; 
this.item = undefined; 
this.value = ''; 
}else{ 
var item = this.dropDown.items[node.getAttribute("item")]; 
var displayAttr = this.displayValueAttr!=null?this.displayValueAttr:this.searchAttr;//              displayValueAttr 

newValue = (this.store._oldAPI ? // remove getValue() for 2.0 (old dojo.data API) 
this.store.getValue(item, displayAttr) : item[displayAttr]).toString();// this.searchAttr   displayAttr 

this.set('item', item, false, newValue); 
} 
// get the text that the user manually entered (cut off autocompleted text) 
this.focusNode.value = this.focusNode.value.substring(0, this._lastInput.length); 
// set up ARIA activedescendant 
this.focusNode.setAttribute("aria-activedescendant", domAttr.get(node, "id")); 
// autocomplete the rest of the option to announce change 
this._autoCompleteText(newValue); 
}, 

}); 
});
그리고 WebForm 페이지 를 새로 만 들 고 Filtering Select 컨트롤 을 설치 합 니 다.데이터 원본 의 수 치 는 페이지 류 가 계승 한 userListstr 필드 입 니 다.페이지 프론트 코드 는 다음 과 같 습 니 다

<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeFile="OrgRelation.aspx.cs" Inherits="OrgRelation" %> 

<!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 id="Head1" runat="server"> 
<title></title> 
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 
<link href="Scripts/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" /> 
<link href="Scripts/dojo/dojo/resources/dojo.css" rel="stylesheet" type="text/css" /> 
<script src="Scripts/dojo/dojo/dojo.js" type="text/javascript"></script> 

<script type="text/javascript"> 
//     
require([ 
'test/FilteringSelect', 
'dojo/store/Memory', 
'dojo/domReady!' 
], function (FilteringSelect, Memory) { 

var jsonstr = '<%=userListStr%>'; 
var json = jQuery.parseJSON(jsonstr); 
var obj = {data:""}; 
obj['data'] = json; 
var selectStore = new Memory(obj); 
//  FilteringSelect 
var testSelect = new FilteringSelect({ 
id: "testSelect", 
name: "test", 
value: "", 
store: selectStore, 
searchAttr: 'py', //                   
labelAttr: 'name', //             
displayValueAttr: 'name', //                    
required: false, 
autoComplete: false 
}, "testSelect"); 

}); 

//         
window.onload = function () { 

function selblur() { 
var guid = dijit.byId('testSelect').attr('value'); 
alert(guid); 
window.location.href = "OrgRelation.aspx?userId=" + guid; 
return false; 
} 
var sel = dojo.byId("testSelect"); 
dojo.connect(sel, "onblur", selblur); 
}; 
</script> 

</head> 
<body> 
<form id="Form1" method="post" runat="server"> 
<div align="center" id="title"> 
<strong>        </strong> 
</div> 

<div style="text-align: center;width: 100%;padding-top: 100px;font-size:15px;">    :<input id="testSelect"/> 
</div> 

</form> 
</body> 
</html>
마지막 으로.페이지 로 딩 이벤트 에서 사용자 데 이 터 를 가 져 오고 직렬 화 된 후에 proctected 형식의 userListstr 필드 에 부여 합 니 다.그 중에서 마이크로소프트 가 제공 한 한자 병 음 을 가 져 오 는 라 이브 러 리 ChnCharInfo.dll 을 참조 합 니 다.코드 는 다음 과 같 습 니 다

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using Microsoft.International.Converters.PinYinConverter; 
using System.Text; 
using System.Text.RegularExpressions; 
using System.Web.Script.Serialization; 

public partial class OrgRelation : System.Web.UI.Page 
{ 
protected string userListStr = string.Empty; 

protected void Page_Load(object sender, EventArgs e) 
{ 
if (!IsPostBack) 
{ 
GetUsers(); 
} 
} 

//     Json         
public class UserInfo 
{ 
public string name { get; set; } 
public string id { get; set; } 
public string py { get; set; } 
} 

protected void GetUsers() 
{ 
//      ，           
List<User> list =new BLL.User().GetUsers(); 
List<UserInfo> UserInfoList = new List<UserInfo>(); 
foreach (User item in list) 
{ 
UserInfo userInfo= new UserInfo(); 
userInfo.id = item.UserId; 
userInfo.name = item.User Name; 
userInfo.py = GetPY(item.UserName); 
UserInfoList .Add(userInfo); 
} 
JavaScriptSerializer jsonSerializer = new JavaScriptSerializer(); 
//          
userListStr = jsonSerializer.Serialize(UserInfoList); 
} 

#region           
/// <summary> 
///                  ,         
/// </summary> 
/// <param name="ch">    </param> 
/// <returns></returns> 
public static List<string> GetPinyins(char ch) 
{ 
List<string> list = new List<string>(); 
ChineseChar cc = new ChineseChar(ch); //            
foreach (string item in cc.Pinyins) 
{ 
if (item != null) 
{ 
string temp = item.Substring(0, item.Length - 1); 
if (!list.Contains(temp)) 
{ 
list.Add(temp); 
} 
} 
} 
return list; 
} 
/// <summary> 
///                 （      ） 
/// </summary> 
/// <returns></returns> 
public static string GetPY(string str) 
{ 
Regex reg = new Regex(@"[\u4e00-\u9fa5]"); 
StringBuilder sb = new StringBuilder(); 
for (int i = 0; i < str.Length; i++) 
{ 
string ch = str[i].ToString(); 
if (reg.IsMatch(ch)) 
{ 
string s = GetPinyins(str[i])[0]; 
sb.Append(s[0]); 
} 
else 
{ 
sb.Append(ch); 
} 
} 
return sb.ToString(); 
} 
#endregion 
}
이렇게 병 음 검색 기능 이 완성 되 었 습 니 다.그러나 두 가지 만 족 스 럽 지 못 한 점 이 있 습 니 다.1.병 음 검색 을 사용 한 후에 중국어 검색 을 사용 하기 어렵 습 니 다.
2.Jquery UI 의 autocomplete 플러그 인 은 병 음 검색 기능 을 실현 합 니 다.
사실 Jquery UI 도 아주 좋 은 플러그 인 인 인 autocomplete 를 제공 합 니 다.이것 은 ChnCharInfo.dll 라 이브 러 리 와 함께 사용 하면 똑 같은 우수한 검색 기능 을 실현 할 수 있 을 뿐만 아니 라 상기 두 가지 문 제 를 잘 해결 할 수 있 습 니 다.한번 와 보 세 요.
필요 한 구성 요소 와 인용 라 이브 러 리:Jquery-UI,한자 병 음 변환 언어 패키지 라 이브 러 리 ChnCharInfo.dll 과 JSon 대상 직렬 화 라 이브 러 리 Newtonsoft.JSon.dll 은 다음 과 같 습 니 다.
　
1.WebForm 의 aspx 페이지 구현:
먼저 jquery-1.8.2.js,jquery-ui-1.9.0.custom.js,jquery-ui-1.9.0.custom.cs 를 도입 한 다음 페이지 에 불 러 온 이벤트 에 다음 과 같은 스 크 립 트 를 쓰 십시오. source:"GetUser.ashx"는 문 자 를 입력 한 후 비동기 요청 을 보 내 는 주 소 를 말 합 니 다.GetUser.ashx 는 요청 한 클 라 이언 트 에 JSon 형식 을 만족 시 키 는 사용자 정 보 를 제공 합 니 다.다섯 번 째 줄 의 minLength:몇 글자 가 입력 되 었 을 때 비동기 요청 을 보 내기 시작 합 니 다.일곱 번 째 줄 의 select:function(event,ui){}은 이 벤트 를 선택 하고 ui.item 은 선 택 된 항목 을 표시 합 니 다.8-9 줄 의 숨겨 진 도 메 인 저장 값 은 페이지 를 새로 고침 한 후에 이 선택 한 항목 의 관련 정 보 를 다시 얻 을 수 있 도록 페이지 를 다시 써 서 준비 합 니 다.10-11 줄 은 현재 선택 한 id 와 label 을 매개 변수 로 OrgRelation.aspx 에 post 요청 을 보 냅 니 다.선택 한 사용자 의 소재 부서 조회 처 를 실현 하고 페이지 오른쪽 에 있 는 ListBox 컨트롤 에 표시 합 니 다.서버 는 이번 토론 의 내용 과 상 관 없 이 코드 를 붙 이지 않 습 니 다.
페이지 의 전체 코드 목록 은 다음 과 같 습 니 다.
사용자 데이터 가 자주 변 하지 않 기 때문에 검색 은 서버 에 데 이 터 를 자주 요청 해 야 한 다 는 점 을 감안 하여 사용자 데 이 터 를 애플 리 케 이 션 에 저장 합 니 다.이렇게 검색 할 때 애플 리 케 이 션 에서 직접 가 져 옵 니 다.매번 데이터 베 이 스 를 조회 하지 않 아 도 됩 니 다.
응용 프로그램 대상 의 할당 값 은 전역 응용 프로그램 Global.aax 에 있 습 니 다. Application_Start 이벤트 에서 완 성 된 코드 는 다음 과 같다.데이터베이스 가 바 뀌 었 을 때 Updateapplication.ashx 를 방문 하면 application["Contact"]대상 을 업데이트 할 수 있 습 니 다.
3.GetUser.ashx 에서 검색 조건 에 맞 는 데 이 터 를 되 돌려 줍 니 다.
GetUser.ashx 에서 검색 이벤트 에 응답 하 는 서버 코드 목록 은 다음 과 같 습 니 다.퍼 지 검색 기능 이 필요 하 다 면 25 번 째 줄 의 정규 표현 식 을 수정 할 수 있 습 니 다.Regex reg=new Regex(input Str);됐다.더 많은 필드 의 복합 검색(예 를 들 어 사용자 핸드폰 번호,메 일 주소 등)이 필요 하 다 면 애플 리 케 이 션 이 할당 할 때 관련 필드 정 보 를 얻 고 26 줄 의 if 판단 에 해당 하 는 일치 항목 을 추가 하면 된다.
그 중에서 UserItem 은 페이지 에 JSon 대상 을 제공 하 는 클래스 이 고 label 은 필수 필드 이 며 검색 상자 에 표 시 된 내용 은 이 필드 의 값 입 니 다.조건 에 맞 는 데이터 집합 을 얻 은 후,Newtonsoft.JSon.JSonConvert 의 SerializeObject 방법 으로 직렬 화 를 하고 클 라 이언 트 에 게 되 돌려 주어 야 합 니 다.
여기 서 본 고의 시작 스티커 효 과 를 실현 했다.
자바 다 중 스 레 드 시 뮬 레이 션 거북이 토끼 달리기 실현
Android 사용자 정의 상하 좌우 간격

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage