jquery-ul-autoComplete

最新推荐文章于 2025-08-15 22:56:20 发布

ns__Alex

最新推荐文章于 2025-08-15 22:56:20 发布

阅读量432

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： javascript function path stylesheet json url

本文链接：https://blog.youkuaiyun.com/ns__Alex/article/details/7260437

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用jQuery UI插件实现输入框自动完成功能，包括样式设置、JavaScript交互逻辑及后端数据交互过程。通过AJAX调用后端接口获取匹配数据，并展示在下拉列表中供用户选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>

.ui-autocomplete {
               max-height: 200px;
               overflow-y: auto;
               overflow-x: hidden;
               font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
               font-size: 12px;
           }

</style>

$(function() {
    //解决中文问题
   $('#unitName').bind( "input.autocomplete", function(){
        $(this).trigger('keydown.autocomplete');

   });
   $( "#unitName" ).autocomplete({
       source: function( request, response ) {
           $.ajax({
               type:"post",
               url:"<%=path%>/webservice/healthCenters.action",
               data:"healthCenterName="+$("#unitName").val(),
               dataType: "json",
               success: function( data ) {
                   response( $.map( data, function( item ) {
                       return {
                           label: item.name,
                           value: item.name
                       }
                   }));
               }
           });
       },
       minLength: 1

   });

});

</script>