您的位置：首页 > Web前端 > BootStrap

bootstrap-typeahead.js 实现输入提示实例

2016-08-15 00:00 597 查看

摘要: bootstrap-typeahead.js 使用记录

1、前台写法：

<!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>

2、action写法：

@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;
}
}

3、其他工具类：

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航