다음으로, 이전 기사에서는 Bootstrap Typeahead 구성 요소를 사용하여 Baidu 풀다운 효과를 달성하는 Bootstrap Learning Series를 소개합니다.
트위터의 부트 스트랩은 현재 가장 인기있는 프론트 엔드 프레임 워크입니다. Bootstrap은 HTML, CSS 및 JavaScript를 기반으로합니다. 단순하고 유연하여 웹 개발을 더 빨리 만듭니다.
공식 : http://twitter.github.io/typeahead.js/
예 : http://twitter.github.io/typeahead.js/examples/ (이 기사 : 오픈 소스 프로젝트의 트위터)
프로젝트 소스 코드 : https://github.com/twitter/typeahead.js (typeahead.js-master.zip을 다운로드하려면 zip 다운로드를 클릭하십시오).
먼저 렌더링을 보여 드리겠습니다.
1. 구현
HTML
팁 : examples.css는 인스턴스의 CSS 파일입니다
<link type = "text/css"href = "@url.content ("~/scripts/typeahead/examples.css ")"rel = "stylesheet"/> <script src = "@url.content ("~/scripts/typeahead/typeahead.js ")"type/javascript "> script"> src = "@url.content ("~/scripts/typeahead/hogan-2.0.js ")"type = "text/javaScript"> </script> <script src = "@url.content ("~/scripts/typeahead/hogan-2.0.js ")"tapt/javascript "> </javascript"> src = "@url.content ("~/scripts/typeahead/indercore-min.js ")"type = "toxt/javaScript"> </script> <div> <div style = "margin : 10px 50px"> <label> name </label> <div>@html.textbox ( "inputname", "inputname", form-control ", placeholder ="이름을 입력하십시오 "}) </div> </div> </div>@html.hidden ("getInputName ", url.action ("getInputName ")) <script type ="text/javaScript "> $ ( '. inputname'). $ ( "#getInputName"). val () + '/? query =%query', 템플릿 : [ '<p> {{vipname}} </p>', '<p> {{name}} </p>', '<p> {{description}} </p>']. Hogan}); </script> </div>제어 장치
#영역 get name get name pull down /// <summary> /// 이름 프롬프트 가져 오기 ///// </summary> /// <returns> </returns> public actionResult getInputName (string query) {var list = new List <typeaheadmodel> (); if (! string.isnullorwhitespace (query)) Query = Query (query.teach); getData ()) {if (item.name.contains (query))) {list.add (item);}}} return json (list, jsonrequestbehavior.allowget);}#endregionpublic list <typeaheadmodel> getData () {typeaheadmodel> list <typeaheademod <typeaheadmeadel> (typeaheadmead); typeaheadModel (); for (int i = 0; i <5; i ++) {model = new typeaheadModel (); model.description = "d"; model.vipname = "v"; model.name = "a" + i.tostring (); model.value = "a" + i.tostring (); i};} for}; i ++) {model = new TypeAheadModel (); model.description = ""; model.vipname = ""; model.name = "b" + i.toString (); model.value = "b" + i.toString (); list.add (model);} return list;}모델
공개 클래스 typeaheadModel {public String name {get; 세트; } public String vipname {get; 세트; } 공개 문자열 설명 {get; 세트; } /// <summary> /// 선택한 텍스트 상자의 값 /// </summary> 공개 문자열 값 {get; 세트; }}위의 것은 Baidu 풀다운 효과를 달성하기 위해 편집기가 소개 한 Bootstrap Learning Series의 Bootstrap Typeahead 구성 요소입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!