jQuery UI 中的 autocomplete 搜索框自动补全属性在 PHP 下使用 Ajax 动态匹配

学习笔记 马富天 2017-09-09 13:59:29 7 0

【摘要】使用 jquery ui 中的 autocomplete 来实现搜索框的自动补全功能,完整可用的代码如下列出: 本文代码涉及到的文件一共有三个:index.html,data.php,ajax.php ,将如下内容写入到文件中保存即可运行。

index.html 文件中的内容:

  1. <!doctype html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>jQuery UI Autocomplete</title>
  6. 		<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  
  7. 		<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  8. 		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  9. 		<script>
  10. 		$( function() {
  11. 			//	用法一
  12. 			$( "#tags1" ).autocomplete({
  13. 				source: ["ActionScript","ASP","ASP.NET","PHP","JSP"]
  14. 			});
  15. 			//	用法二
  16. 			var availableTags = ["ActionScript","ASP","ASP.NET","PHP","JSP"];
  17. 				$( "#tags2" ).autocomplete({
  18. 				source: availableTags
  19. 			});
  20. 			//	用法三
  21. 			$("#tags3").autocomplete({
  22. 			    // 静态的数据源,根据label属性进行显示或模糊匹配,当给输入框设置value属性值
  23. 			    source: [
  24. 			        { label: "ActionScript", value: 1 },
  25. 			        { label: "ASP", value: 2 },
  26. 			        { label: "ASP.NET", value: 3 },
  27. 			        { label: "PHP", value: 4 },
  28. 			        { label: "JSP", value: 5 },
  29. 			    ]
  30. 			});			
  31. 			//	用法四:输入框显示的还是label属性值,但还要给另外的元素(例如隐藏文本域)设置value属性值,或者做一些其他处理。我们可以使用select事件来协助处理
  32. 			$("#tags4").autocomplete({
  33. 			    // 静态的数据源
  34. 			    source: [
  35. 			        { label: "ActionScript", value: 1, sayHi: "您选择的是 1 号" },
  36. 			        { label: "ASP", value: 2, sayHi: "您选择的是 2 号" },
  37. 			        { label: "ASP.NET", value: 3, sayHi: "您选择的是 3 号" },
  38. 			        { label: "PHP", value: 4, sayHi: "您选择的是 4 号" },
  39. 			        { label: "JSP", value: 5, sayHi: "您选择的是 5 号" },
  40. 			    ],
  41. 			    select: function(event, ui){
  42. 			        // 这里的this指向当前输入框的DOM元素
  43. 			        // event参数是事件对象
  44. 			        // ui对象只有一个item属性,对应数据源中被选中的对象
  45. 			        $(this).value = ui.item.label;
  46. 			        $("#sayHi").html(ui.item.sayHi);
  47. 			        // 必须阻止事件的默认行为,否则autocomplete默认会把ui.item.value设为输入框的value值
  48. 			        event.preventDefault();     
  49. 			    }
  50. 			});
  51. 			//	用法五
  52. 			$("#tags5").autocomplete({
  53. 			    source: "data.php"
  54. 			});
  55. 			//	用法六
  56. 			$("#tags6").autocomplete({
  57.                source: function( request, response ) {  
  58.                    $.ajax({  
  59.                         url : "ajax.php",  
  60.                         type : "get",  
  61.                         dataType : "json",  
  62.                         data : "key=" + $("#tags6").val(),
  63.                        	success: function( data ){   
  64. 							response(data);
  65.                        	}
  66.                   });  
  67.                },  
  68. 			});
  69. 		} );
  70. 		</script>
  71. 	</head>
  72. 	<body>
  73. 		<input id="tags1" />
  74. 		<input id="tags2" />
  75. 		<input id="tags3" />
  76. 		<input id="tags4" />
  77. 		<input id="tags5" />
  78. 		<input id="tags6" />
  79. 		<div id="sayHi"></div>
  80. 	</body>
  81. </html>

data.php 中的内容是:

  1. $arr = array("ActionScript","ASP","ASP.NET","PHP","JSP");
  2. echo json_encode($arr);	//	输出的是 JSON 格式字符串

ajax.php 文件中写入:

  1. $arr = array("ActionScript","ASP","ASP.NET","PHP","JSP");
  2. echo json_encode($arr);	//	输出的是 JSON 格式字符串
  3. ajax.php 中的内容如下:
  4. $key = $_GET['key'];
  5. //	以下代替从 MySQL 中查询数据的 SQL 语句
  6. $arr = array("ActionScript","ASP","ASP.NET","PHP","JSP");
  7. foreach($arr as $k => $v)
  8. {
  9. 	//	不区分大小写
  10. 	if(stripos($v,$key) !== false)
  11. 	{
  12. 		$result[] = $v;
  13. 	}
  14. }
  15. echo json_encode($result);	//	输出的是 JSON 格式字符串

本文写了 autocomplete 的六种用法,大家可以选取合适的来使用即可。

请输入图片名称

版权归 马富天PHP博客 所有

本文标题:《jQuery UI 中的 autocomplete 搜索框自动补全属性在 PHP 下使用 Ajax 动态匹配》

本文链接地址:http://www.mafutian.net/10.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

0

上一篇《 MySQL 使用 SQL 语句实现查询上一篇和下一篇文章的 ID 》 下一篇《 安全扫描工具 AWVS 8.0,AWVS 9.x,AWVS 10.5,AWVS 11 破解版下载 》
分享到:

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码