typeahead自动提示功能

Author: ninuxGithub

README.md

@@ -39,6 +39,34 @@ vuejs 增删改查的demo，自动建表 <br>
 		
 		gons json转对象
 		
+		typeahead:输入框文本自动提示功能， 返回值为json , jsonp都可以
+		依赖的js为：http://www.guriddo.net/demo/js/bootstrap3-typeahead.js
+		核心代码如下：
+```javascript
+        	$(".typeahead").typeahead({ 
+					source: function(query, proxy) {
+						$.ajax({
+							url: '/autoJson?callback=?',
+							dataType: "jsonp",
+							data: {term: query},
+							
+							/***完整的写法， 指定json中的某个字段(属性)***/
+							//方法一：
+							success : function (data){
+				                var arr = [];
+				                for (i in data)
+				                {
+				                    arr.push(data[i]['name']);
+				                }
+				                proxy(arr);
+					        },
+							//方法二：
+							success : proxy //简写
+						});
+					}
+			   });
+```		
+		
 		Excel导出 demo 
 		
 		

src/main/java/com/example/demo/controller/AutoCompleteController.java

@@ -6,6 +6,7 @@
 import java.util.List;
 import java.util.Map;
 
+import org.apache.commons.lang.StringUtils;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -95,6 +96,25 @@ public JSONPObject autoScriptUpdate(@RequestParam("term") String query,
 		return new JSONPObject(callback, list);   
 	}
 
+	@ResponseBody
+	@RequestMapping(value = "/autoTypeahead", method = RequestMethod.GET)
+	public List<Order> autoTypeahead(@RequestParam("term") String query){
+		
+		List<Order> orders = orderRepository.findAll();
+		
+		if(StringUtils.isNotBlank(query)){
+			List<Order> list = new ArrayList<>();
+			for(Order order : orders){
+				if(order.getProduceName().contains(query)){
+					list.add(order);
+				}
+			}
+			return list;
+		}
+		return orders;
+		
+	}
+	
 
 	@ResponseBody
 	@RequestMapping("/amountSelect")

src/main/java/com/example/demo/test/TestMap.java

@@ -0,0 +1,13 @@
+package com.example.demo.test;
+
+public class TestMap {
+	public static void main(String[] args) {
+		int hash = TestMap.hash("java");
+		System.out.println(hash);
+	}
+	static final int hash(Object key) {
+		int h;
+		return (key == null) ? 0 : (h = key.hashCode()) ^ (h >>> 16);
+	}
+
+}

src/main/resources/static/user/jqgridDemo.html

@@ -39,11 +39,38 @@
 <div style="margin-left:20px">
     <table id="jqGrid"></table>
     <div id="jqGridPager"></div>
+    
+    <div id="remote">
+  		<input class="typeahead"  type="text" placeholder="输入文字，自动提示.....">
+	</div>
 
 </div>
     <script type="text/javascript"> 
 
         $(document).ready(function () {
+        	
+        	$(".typeahead").typeahead({ 
+					source: function(query, proxy) {
+						$.ajax({
+							url: '/autoTypeahead',
+							dataType: "json",
+							data: {term: query},
+							
+							/***完整的写法， 指定json中的某个字段(属性)***/
+							//方法一：
+							success : function (data){
+				                var arr = [];
+				                for (i in data){
+				                	console.dir(data[i])
+				                    arr.push(data[i]['produceName']+" "+data[i]['orderId']);
+				                }
+				                proxy(arr);
+					        }
+							//方法二：
+							//success : proxy //简写
+						});
+					}
+			   });
 
 
             $("#jqGrid").jqGrid({