bootstrap-typeahead.js 實現輸入提示實例

時間 2019-11-07

標籤 bootstrap typeahead.js typeahead 實現輸入提示實例欄目 Bootstarp 简体版

原文原文鏈接

一、前臺寫法：javascript

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>輸入提示實例</title>
    <link href="CSS/bootstrap.min.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="caption">
        <input type="text" class="form-control" placeholder="搜索輸入..." id="sensor-search" name="sensor-search"  data-provide="typeahead" autocomplete="off" />                              
        <button class="btn btn-danger form-control" type="button" id="search-con">
        <span class="fa fa-search ">搜索</span>
        </button>          
    </div>
</body>
<script src="JS/jquery.min.js" type="text/javascript"></script>
<script src="JS/bootstrap.min.js" type="text/javascript"></script>
<script src="JS/bootstrap-typeahead.js" type="text/javascript"></script>
<script>
$('#sensor-search').typeahead(
                        {
                            source : function(query, process) {
                                var parameter = {
                                    query : query
                                    };
                                $.post('prompt.action',     //第一個參數爲調用的action，parameter爲用戶輸入的數據，data爲返回的提示數據。
                                        parameter, function(data) {
                                            var array = null;
                                            array = data.split(",");
                                            process(array); //process中傳入數組
                                        });
                                }
 });
</script>

二、action寫法：css

@SuppressWarnings("serial")
public class PromptAction extends ActionSupport{
	private static final Logger log = LoggerFactory.getLogger(PromptAction.class);
    private CollectionDataDaoImp adi = BeanFactoryUtil.getImpl(CollectionDataDaoImp.class);
    //實例化DaoImp
    private String query;
    private InputStream inputStream;
    
	public String getQuery() {
		return query;
	}
	public void setQuery(String query) {
		this.query = query;
	}
	
	public InputStream getInputStream() {
		return inputStream;
	}
	public void setInputStream(InputStream inputStream) {
		this.inputStream = inputStream;
	}
	public String execute() throws   UnsupportedEncodingException{
		
		log.info("傳入參數："+query);
		List<String> ad = adi.findHD(query);
		StringBuffer str = new StringBuffer();
		for(String a:ad){
			str.append(a+",");
		}		
		log.info("返回的輸入相關提示："+str.toString());
		inputStream = new ByteArrayInputStream(str.toString().getBytes("UTF-8"));
		return SUCCESS;		
	}    	
}

三、其餘工具類：html

public class BeanFactoryUtil {
	private static Properties props = new Properties();
	static {
		// 1，讀取配置文件，只須要一次
		InputStream in = BeanFactoryUtil.class.getClassLoader().getResourceAsStream("BeanFactory.properties"); //properties中存儲CollectionDataDaoImp = cn.ict.data.dao.imp.CollectionDataDaoImp 內容
		try {
			props.load(in);
		} catch (Exception e) {
			throw new RuntimeException(e);
		} finally {
			if (in != null) {
				try {
					in.close();
				} catch (IOException e) {
					throw new RuntimeException(e);
				}
			}
		}
	}
	/**
	 * 獲取指定接口對應的實現類實例
	 * 
	 * @param key
	 * @return
	 */
	@SuppressWarnings("unchecked")
	public static <T> T getImpl(Class<T> clazz) {
		try {
			// 2，獲取key對應的value，就是實現類的全限定名
			String key = clazz.getSimpleName(); // key是接口的簡單名稱
			String className = props.getProperty(key);
			// 3，生成實例並返回
			return (T) Class.forName(className).newInstance();
		} catch (Exception e) {
			throw new RuntimeException(e);
		}
	}
}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
    "http://struts.apache.org/dtds/struts-2.3.dtd">

<struts>
	<!-- 開啓使用開發模式，詳細錯誤提示 -->
	<constant name="struts.devMode" value="false" />
	<!-- 指定每次請求到達，從新加載資源文件 -->
	<constant name="struts.i18n.reload" value="true" />
	<!-- 指定每次配置文件更改後，自動從新加載 -->
	<constant name="struts.configuration.xml.reload" value="true" />
	<!-- 指定XSLT Result使用樣式表緩存 -->
	<constant name="struts.xslt.nocache" value="true" />
	
	<constant name="struts.i18n.encoding" value="UTF-8" />
    
	<package name="prompt" namespace="/" extends="json-default">
        <action name="prompt" class="cn.ict.data.webservice.SensorPromptAction">
 		<result name="success" type="stream">
 			<param name="contentType">text/html</param>
			<param name="inputName">inputStream</param>
		</result>
	</action>				
    </package>
</struts>

相關標籤/搜索

每日一句

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