MagicSuggest实现根据输入进行选择提示的下拉框

最新推荐文章于 2024-05-14 09:42:40 发布

木简韵

最新推荐文章于 2024-05-14 09:42:40 发布

阅读量4.5k

点赞数 1

分类专栏：技术文章标签：代码 form表单效果

本文链接：https://blog.csdn.net/hmh123123hmh/article/details/46724683

版权

技术专栏收录该内容

20 篇文章 0 订阅

订阅专栏

最终实现效果如下：
选择下拉框
form表单代码块：

<span class="lines1_text"> <label>选择输入联系人：</label></span>
<div class="address_style">
     <input id="address_id" name="address_id"  type="text"/>
</div>

JS代码块：

<script type="text/javascript">
$(document).ready(function () {
      var addressIdMagicSuggest = $('#address_id').magicSuggest({
              width:200,
              allowFreeEntries: false,
              maxSelection:1,
              autoSelect:true,
              valueField:"id",
              displayField:"value",
              resultAsString:true,
              selectionStacked: true,
              //下拉框数据的获得：
              data: '${cxt}/ab/getCompanyAbJson?companyId=${param.companyId}'
     });
    $("#submitbt").click(function(){
        if(addressIdMagicSuggest.getValue()==""){
            alert("请输入或者选择正确联系人！");
            return false;
        }
        htmlobj=$.ajax({
             type: "POST",
             url: '${cxt}/mt/addMT',
             data:$("form").serialize(),   
             async:false,
             dataType: "text",       
             success: function (data) {
                 var json = eval("("+data+")");
                 if('success'==json.result){
                   alert("保存成功！");
                   window.location.href='${cxt}/mt/getCompanyMT?companyId='+json.companyId;
                 }else if('isopen'==json.result){
                    alert("此联系人已经开启了电话会议！");
                    return false;
                 }else{
                    alert(data);
                 }
             }, 
             error: function (XMLHttpRequest, textStatus, errorThrown) { 
                  alert(XMLHttpRequest.status);
                  alert(XMLHttpRequest.readyState);
                  alert(textStatus);
             }
        });
    });
});
</script>

magicSuggestd的data属性即为下拉框中的内容（要是json格式），如果要是显示多项内容，那么后台sql文要做字段拼接。
本实例的后台sql如下：

String companyId = getPara("companyId");
List<AddressBook> list  = AddressBook.dao.find("select (name || '--' ||phone_number) as 
             value,id  from  ys_address_book where company_id=? and is_enabled=1 order 
             by PHONE_NUMBER",companyId);
renderJson(list);