autocomplete自動匹配，聯動輸入

時間 2019-11-21

標籤 autocomplete 自動匹配聯動輸入简体版

原文原文鏈接

數據庫中有一些員工的基本信息，當用戶錄入既存員工信息的時候每每但願像百度和谷歌檢索那樣，自動匹配輸入內容，一旦匹配成功，其餘的信息自動輸入，無需用戶再輸。能夠用jquery.autocomplete插件實現。好比數據庫中有：電話，身份證，姓名這些信息，錄入時任何一個時，但願自動完成匹配，匹配成功後，另外兩個信息自動完成輸入。導入 <script src="../public/jquery.autocomplete.js" type="text/javascript"></script>

前臺： <script type="text/javascript">

$(function() {

//接收後臺的json

var json1 = eval("(" + $("#aujson1").val() + ")");

//匹配電話

$("#iPhone").autocomplete(json1.data, {

formatItem: function(item) { return item.Phone; //當前輸入框顯示的值}

}).result(function(event, item) { //匹配成功後的動做

$("#iCard").val(item.ShenFen);

$("#iName").val(item.XingMing);

});

//匹配身份證

$("#iCard").autocomplete(json1.data, {

formatItem: function(item) { return item.ShenFen; }

}).result(function(event, item) {

$("#iPhone").val(item.Phone);

$("#iName").val(item.XingMing);

});

//匹配姓名

$("#iName").autocomplete(json1.data, {

formatItem: function(item) { return item.XingMing; }

}).result(function(event, item) {

$("#iPhone").val(item.Phone);

$("#iCard").val(item.ShenFen);

});

</script>

<body>

<div>

電話：<input type="text" id="iPhone" />

身份證：<input type="text" id="iCard" />

姓名：<input type="text" id="iName" />

</div>

</form>

</body> 服務器端：

public partial class 測試_autoComplete : System.Web.UI.Page

{

public string aujson1 = string.Empty;

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack) {

StringBuilder strb = new StringBuilder();

//初始化json對象,用於前臺獲取對象

JSONHelp jsonhelp = new JSONHelp();

jsonhelp.successS = true;

//做成json對象，這個地方能夠從數據庫讀

jsonhelp.addItem("Phone", "123456789");

jsonhelp.addItem("ShenFen", "412829198342342");

jsonhelp.addItem("XingMing", "熊大");

jsonhelp.addItemOk();

jsonhelp.addItem("Phone", "23456789");

jsonhelp.addItem("ShenFen", "353453457031240");

jsonhelp.addItem("XingMing", "熊二");

jsonhelp.addItemOk();

jsonhelp.addItem("Phone", "345678912");

jsonhelp.addItem("ShenFen", "423423423110638");

jsonhelp.addItem("XingMing", "張三");

jsonhelp.addItemOk();

jsonhelp.addItem("Phone", "45678912");

jsonhelp.addItem("ShenFen", "234254310120451");

jsonhelp.addItem("XingMing", "李四");

jsonhelp.addItemOk();

jsonhelp.addItem("Phone", "56789123");

jsonhelp.addItem("ShenFen", "23423409121412");

jsonhelp.addItem("XingMing", "李自成");

jsonhelp.addItemOk();

jsonhelp.addItem("Phone", "789012345");

jsonhelp.addItem("ShenFen", "2234810402487");

jsonhelp.addItem("XingMing", "張大");

jsonhelp.addItemOk();

////////////////////////////////////////////////////////

aujson1 = jsonhelp.ToString();

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。