bootstrap 搜索建议插件 suggest + 使用FastJSON进行JSON和String转换

先上原链接 http://lzw.me/pages/demo/bootstrap-suggest-plugin/demo/

上图：

先发一下json格式：

{
	"message": "",
	"value": [
		{
			"userName": "name1",
			"shortAccount": "AAA",
			"userId": "111"
		}, {
			"userName": "name2",
			"shortAccount": "BBB",
			"userId": "222"
		}, {
			"userName": "name3",
			"shortAccount": "CCC",
			"userId": "333"
		}, {
			"userName": "name4",
			"shortAccount": "DDD",
			"userId": "444"
		}
	],
	"code": 200,
	"redirect": ""
}

• 前端：

引入：

<link href="/static/css/bootstrap.min.css" rel="stylesheet">

<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/bootstrap-suggest.js"></script>

正文：

      <div class="input-group">
          <input type="text" class="form-control" id="testNoBtn">
          <div class="input-group-btn">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                  <span class="caret"></span>
              </button>
              <ul class="dropdown-menu dropdown-menu-right" role="menu">
              </ul>
          </div>
          <!-- /btn-group -->
      </div>

JS：

(function() {
    /**
     * 测试(首次从 URL 获取数据)
     */
    function initTest() {
        $("#test").bsSuggest('init', {
            /*url: "/rest/sys/getuserlist?keyword=",
            effectiveFields: ["userName", "email"],
            searchFields: [ "shortAccount"],
            effectiveFieldsAlias:{userName: "姓名"},*/
            clearable: true,
            url: "jsontest",
            idField: "userId",
            keyField: "userName"
        }).on('onDataRequestSuccess', function (e, result) {
            console.log('onDataRequestSuccess: ', result);
        }).on('onSetSelectValue', function (e, keyword, data) {
            console.log('onSetSelectValue: ', keyword, data);
        }).on('onUnsetSelectValue', function () {
            console.log('onUnsetSelectValue');
        }).on('onShowDropdown', function (e, data) {
            console.log('onShowDropdown', e.target.value, data);
        }).on('onHideDropdown', function (e, data) {
            console.log('onHideDropdown', e.target.value, data);
        });
    }
    //按钮方法事件监听
    $('#methodTest button').on('click', function() {
        var method = $(this).text();
        var $i;

        if (method === 'init') {
            initTest();
        } else {
            $i = $('#test').bsSuggest(method);
            if (typeof $i === 'object') {
                $i = $i.data('bsSuggest');
            }
            console.log(method, $i);
            if (!$i) {
                alert('未初始化或已销毁');
            }
        }

        if (method === 'version') {
            alert($i);
        }
    });
    initTest();


    /**
     * 测试(首次从 URL 获取数据，显示 header，不显示按钮，忽略大小写，可清除)
     */
    $("#testNoBtn").bsSuggest({
        url: "jsontest",
        /*effectiveFields: ["userName", "shortAccount"],
        searchFields: [ "shortAccount"],*/
        effectiveFieldsAlias:{userName: "姓名", userId:"ID", shortAccount:"参数"},
        ignorecase: true,
        showHeader: true,
        showBtn: false,     //不显示下拉按钮
        delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
        idField: "userId",
        keyField: "userName",
        clearable: true
    }).on('onDataRequestSuccess', function (e, result) {
        console.log('onDataRequestSuccess: ', result);
    }).on('onSetSelectValue', function (e, keyword, data) {
        console.log('onSetSelectValue: ', keyword, data);
    }).on('onUnsetSelectValue', function () {
        console.log("onUnsetSelectValue");
    });


 


    //禁用表单提交
    $("form").submit(function() {
        return false;
    });

    //版本切换
    $('#bsVersion button').on('click', function() {
        var ver = $(this).data('version');
        $('#bscss').attr('href', '//cdn.bootcss.com/bootstrap/' + ver + '/css/bootstrap.min.css');
        $('#bsjs').attr('src', '//cdn.bootcss.com/bootstrap/' + ver + '/js/bootstrap.min.js');
    });
}());

• 后端：

    用的Springmvc+FastJSON

    controller：

	@ResponseBody
	@RequestMapping(value="/jsontest")
	public String jsontest() {
		Data data = new Data();
		setUser(data);
		String str = JSON.toJSONString(data);
		
		return str;
	}
	
    //模拟数据
	public static void setUser(Data data){
		data.setRedirect("");
		data.setCode("200");
    	data.setMessage("");
    	List<Value> list = new ArrayList<Value>();
    	list.add(new Value("name1","AAA","111"));
    	list.add(new Value("name2","BBB","222"));
    	list.add(new Value("name3","CCC","333"));
    	list.add(new Value("name4","DDD","444"));
    	data.setValue(list);
	}

Data类：

public class Data {

	private String redirect;
	private String code;
	private String message;
	private List<Value> value;
	public String getRedirect() {
		return redirect;
	}
	public void setRedirect(String redirect) {
		this.redirect = redirect;
	}
	public String getCode() {
		return code;
	}
	public void setCode(String code) {
		this.code = code;
	}
	public String getMessage() {
		return message;
	}
	public void setMessage(String message) {
		this.message = message;
	}
	public List<Value> getValue() {
		return value;
	}
	public void setValue(List<Value> value) {
		this.value = value;
	}
	
}

Value类：

public class Value {
	private String userName;
	private String shortAccount;
	private String userId;

	public String getShortAccount() {
		return shortAccount;
	}

	public void setShortAccount(String shortAccount) {
		this.shortAccount = shortAccount;
	}

	public String getUserId() {
		return userId;
	}

	public void setUserId(String userId) {
		this.userId = userId;
	}

	public String getUserName() {
		return userName;
	}

	public void setUserName(String userName) {
		this.userName = userName;
	}

	public Value(String userName, String shortAccount, String userId) {
		super();
		this.userName = userName;
		this.shortAccount = shortAccount;
		this.userId = userId;
	}

• FastJSON与bean之间转换

	@Test
	public void jsont1() {
		
		Data user = new Data();
		//设置参数
		setUser(user);
		// 将javabean转成json
		System.out.println("将javabean转成json");
		String str = JSON.toJSONString(user);
		System.out.println("fastJson转换后" + str);
		
		// 将json转成java bean
		System.out.println("将json转成java bean");
		
		JSONObject ob1 = JSONObject.parseObject(str);
		JSONArray trans_result1 = (JSONArray) ob1.get("value");
		JSONObject trans_result_content1 = (JSONObject) trans_result1.get(0);
		
		System.out.println(ob1);
		System.out.println(ob1.get("value"));
		System.out.println(trans_result_content1);
		System.out.println(trans_result_content1.get("userName"));

	}

//设置参数用
	public static void setUser(Data user){
	    	user.setRedirect("");
	    	user.setCode("200");
	    	user.setMessage("");
	    	List<Value> list = new ArrayList<Value>();
	    	list.add(new Value("AAA"));
	    	list.add(new Value("BBB"));
	    	list.add(new Value("CCC"));
	    	list.add(new Value("DDD"));
	    	user.setValue(list);
	}

输出结果：

将javabean转成json
fastJson{"code":"200","message":"","redirect":"","value":[{"userName":"AAA"},{"userName":"BBB"},{"userName":"CCC"},{"userName":"DDD"}]}
将json转成java bean
{"redirect":"","code":"200","message":"","value":[{"userName":"AAA"},{"userName":"BBB"},{"userName":"CCC"},{"userName":"DDD"}]}
[{"userName":"AAA"},{"userName":"BBB"},{"userName":"CCC"},{"userName":"DDD"}]
{"userName":"AAA"}
AAA