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>