{"id":2343,"date":"2023-05-20T22:00:54","date_gmt":"2023-05-20T14:00:54","guid":{"rendered":"https:\/\/www.tra56.com\/?p=2343"},"modified":"2023-05-20T22:00:54","modified_gmt":"2023-05-20T14:00:54","slug":"2343","status":"publish","type":"post","link":"https:\/\/www.tra56.com\/2343.html","title":{"rendered":"\u4f7f\u7528autocomplete\u5b8c\u6210\u81ea\u52a8\u63d0\u793a\uff0c\u652f\u6301\u591a\u884c\uff0c\u4f7f\u7528jquery-ui1.12"},"content":{"rendered":"

\u6709\u65f6\uff0c\u9879\u76ee\u4e2d\u4e00\u4e2a\u9875\u9762\u9700\u8981\u6709\u591a\u4e2a\u81ea\u52a8\u63d0\u793a\u529f\u80fd\uff0c\u672c\u6587\u4f7f\u7528\u6700\u65b0jquery<\/a>-ui(1.12)\u6f14\u793a\u4e86\u5b9e\u73b0\u8fc7\u7a0b\u3002<\/p>\n

\u4e00\u3001\u53c2\u8003\u5730\u5740<\/p>\n

https:\/\/jqueryui.com\/autocomplete\/#custom-data<\/a><\/p>\n

\u4e8c\u3001\u5b9e\u73b0\u6b65\u9aa4<\/p>\n

\u76f4\u63a5\u4e0a\u4ee3\u7801<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset="utf-8">\r\n<title>jQuery-ui\u81ea\u52a8\u63d0\u793a<\/title>\r\n<!-- \u5f15\u5165jQuery UI\u7684css\u6587\u4ef6 -->\r\n <link rel="stylesheet" href="http:\/\/code.jquery.com\/ui\/1.12.1\/themes\/smoothness\/jquery-ui.css" rel="external nofollow" >\r\n<!-- \u5f15\u5165jQuery\u7684js\u6587\u4ef6 -->\r\n<script type="text\/javascript" src="http:\/\/code.jquery.com\/jquery-1.12.3.js" ><\/script>\r\n<!-- \u5f15\u5165jQuery UI\u7684js\u6587\u4ef6 -->\r\n<script type="text\/javascript" src="http:\/\/code.jquery.com\/ui\/1.12.1\/jquery-ui.js" ><\/script>\r\n<\/head>\r\n<body>\r\n \r\n<label>\u8bf7\u8f93\u5165\uff1a<\/label>><br>\r\n\u7b2c\u4e00\u884c\uff1a<input id="inputName1" name="language" type="text" onfocus="myHint('inputName1')">\r\n<br>\r\n\u7b2c\u4e8c\u884c\uff1a<input id="inputName2" name="language" type="text" onfocus="myHint('inputName2')">\r\n<br>\r\n\u7b2c\u4e09\u884c\uff1a<input id="inputName3" name="language" type="text" onfocus="myHint('inputName3')">\r\n<br>\r\n<br>\r\n<div id="showMsg"><\/div>\r\n<\/body>\r\n \r\n<script type="text\/javascript">\r\n    var projects = [\r\n        { value: "zhangsan", label: "\u5f20\u4e09" },\r\n        { value: "lisi", label: "\u674e\u56db" },\r\n        { value: "wangwu", label: "\u738b\u4e94" },\r\n        { value: "zhangemazi", label: "\u5f20\u4e8c\u9ebb\u5b50"},\r\n        { value: "zhangshanfeng", label: "\u5f20\u4e09\u4e30" },\r\n{ value: "zhangerfeng", label: "\u5f20\u4e8c\u4e30" },\r\n        { value: "lixiaoba", label: "\u674e\u5c0f\u516b"}\r\n    ];\r\n$(document).ready(function(  ){\r\n   myHint=function(hintId){\r\n \r\n   $("#"+hintId).autocomplete( {\r\nsource: function( request, response ) {\r\nvar results = $.ui.autocomplete.filter(projects, request.term);\r\nresponse(results.slice(0, 3));\/\/\u6700\u591a\u663e\u793a\u51e0\u6761\r\n},\r\nmessages:{\r\n\/\/\u4e0d\u663e\u793a\u63d0\u793a\uff0c\u4e0d\u52a0\u7684\u8bdd\u4f1a\u6709\u82f1\u6587\u63d0\u793a\r\nnoResults:'',\r\nresults:function(){}\r\n},\r\nfocus: function( event, ui ) {\r\n$( "#"+hintId ).val( ui.item.label );\r\nreturn false;\r\n},\r\nselect: function( event, ui ) {\r\n                       $( "#"+hintId ).val( ui.item.label );\r\n$( "#showMsg" ).text( "\u60a8\u9009\u62e9\u4e86\uff1a"+ui.item.value );\r\nreturn false;\r\n}\r\n}).autocomplete( "instance" )._renderItem = function( ul, item ) {\r\n\/\/\u683c\u5f0f\u5316\r\nreturn $( "<li style='background-color: white;'>" )\r\n.append( "<div>" + item.label + "<\/div>" )\r\n.appendTo( ul );\r\n};\r\n};\r\n   \r\n \r\n \r\n});\r\n \r\n<\/script>\r\n<\/html><\/pre>\n
\u5c06\u4ee5\u4e0a\u4ee3\u7801\u4fdd\u5b58\u5230\u6587\u672c\u6587\u4ef6\uff0c\u7136\u540e\u628a\u540e\u7f00\u6539\u4e3ahtml, \u53ef\u76f4\u63a5\u5728\u6d4f\u89c8\u5668\u4e2d\u8fd0\u884c\u3002<\/p>\n
\u8fd0\u884c\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n
<\/p>\n
\"image.png\"\/<\/p>\n","protected":false},"excerpt":{"rendered":"
\u6709\u65f6\uff0c\u9879\u76ee\u4e2d\u4e00\u4e2a\u9875\u9762\u9700\u8981\u6709\u591a\u4e2a\u81ea\u52a8\u63d0\u793a\u529f\u80fd\uff0c\u672c\u6587\u4f7f\u7528\u6700\u65b0jquery-ui(1.12)\u6f14\u793a\u4e86\u5b9e\u73b0\u8fc7\u7a0b\u3002 \u4e00\u3001\u53c2 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,2,66,49],"tags":[],"class_list":["post-2343","post","type-post","status-publish","format-standard","hentry","category-html","category-html5","category-javascript","category-web_html"],"_links":{"self":[{"href":"https:\/\/www.tra56.com\/wp-json\/wp\/v2\/posts\/2343"}],"collection":[{"href":"https:\/\/www.tra56.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tra56.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tra56.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tra56.com\/wp-json\/wp\/v2\/comments?post=2343"}],"version-history":[{"count":1,"href":"https:\/\/www.tra56.com\/wp-json\/wp\/v2\/posts\/2343\/revisions"}],"predecessor-version":[{"id":2344,"href":"https:\/\/www.tra56.com\/wp-json\/wp\/v2\/posts\/2343\/revisions\/2344"}],"wp:attachment":[{"href":"https:\/\/www.tra56.com\/wp-json\/wp\/v2\/media?parent=2343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tra56.com\/wp-json\/wp\/v2\/categories?post=2343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tra56.com\/wp-json\/wp\/v2\/tags?post=2343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}