Jquery autocomplete插件的使用示例

最新推荐文章于 2021-09-13 11:30:05 发布

reg183

最新推荐文章于 2021-09-13 11:30:05 发布

阅读量272

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/chendongpu/article/details/110432280

版权

前端专栏收录该内容

255 篇文章

订阅专栏

源码地址:

https://download.youkuaiyun.com/download/chendongpu/13211245

Jquery autocomplete插件的使用示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery Autocomplete入门示例</title>

    <!-- 引入jQuery的js文件 -->
    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js" ></script>

    <!-- 引入jQuery UI的css文件 -->
    <link rel="stylesheet" type="text/css" href="https://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css" />


    <!-- 引入jQuery UI的js文件 -->
    <script type="text/javascript" src="https://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js" ></script>

    <style type="text/css">
        #sayHi {
            color: blue;
        }
    </style>
</head>
<body>

<label for="language">请输入指定的语言：</label>

<input id="language" name="language" type="text">

<input id="lang_id" name="lang_id" type="hidden" >

<p id="msg">
    "你好"对应的翻译是：<span id="sayHi"></span>
</p>


</body>
<script type="text/javascript">

    $("#language").autocomplete({
        // 静态的数据源
        source: [
            { label: "Chinese", value: 1, sayHi: "你好" },
            { label: "English", value: 2, sayHi: "Hello" },
            { label: "Spanish", value: 3, sayHi: "Hola" },
            { label: "Russian", value: 4, sayHi: "Привет" },
            { label: "French", value: 5, sayHi: "Bonjour" },
            { label: "Japanese", value: 6, sayHi: "こんにちは" },
        ],
        select: function(event, ui){
            // 这里的this指向当前输入框的DOM元素
            // event参数是事件对象
            // ui对象只有一个item属性，对应数据源中被选中的对象

            this.value = ui.item.label;
            $("#lang_id").val( ui.item.value );
            $("#sayHi").html( ui.item.sayHi );

            // 必须阻止默认行为，因为autocomplete默认会把ui.item.value设为输入框的value值
            event.preventDefault();
        }
    });

</script>
</html>

运行效果如下：

在实际应用上，我们的数据源并不是一成不变的。大多数情况下，我们的数据都保存在数据库中，此时，我们就需要使用autocomplete通过AJAX请求获取远程数据作为数据源。

$("#language").autocomplete({
	source: "public.php"
});

对应的 public.php 的服务器页面代码如下：

<?php
header('Content-Type:text/html;charset=UTF-8');

//为了方便举例，这里使用数组来模拟，你也可以在实际应用中从数据库中读取数据
//返回的数据最好是数组或对象类型的JSON格式字符串
$languages = array('Chinese', 'English', 'Spanish', 'Russian', 'French', 'Japanese', 'Korean', 'German');

echo json_encode($languages);
?>

此时，我们再次访问该页面，我们仍然可以看到自动完成的输入效果。

如果该参数是函数，Autocomplete会为其提供两个参数：前者是一个仅有term属性的对象，该属性表示用户的输入；后者是一个响应函数。你可以根据用户的输入，自行获取数据，并进行任何处理，最后调用响应函数(第二个参数)，将数组数据交给Autocomplete去显示菜单。

$("#title").autocomplete( {
	source: function(request, response){
		// request.term 是用户输入的字符串
		// 你可以在这里自行获取数据、自行处理
		
		var dataArray = [,,,]; // 表示处理后的数组数据

		// 将数组数据交给Autocomplete显示为菜单
		// 如果情况特殊，你也可以不调用，从而不显示菜单
		response( dataArray );
	}
} );

我自己的例子按输入加载公司名字，关键代码

    $("#companyName").autocomplete({

        source: function(request, response){
            // request.term 是用户输入的字符串
            // 你可以在这里自行获取数据、自行处理
            console.log("term",request.term);

            var term = request.term;

            $.get("./ajax/all_company.php",{term:term},function(data){
                var dataArray = data;
                console.log("dataArray",dataArray);
                response( dataArray );
            },'json');

            //var dataArray = [,,,]; // 表示处理后的数组数据

            // 将数组数据交给Autocomplete显示为菜单
            // 如果情况特殊，你也可以不调用，从而不显示菜单
            //response( dataArray );
        }


    });