jQuery中的Ajax----搜索框提示效果 【案例】

案例 搜索框提示效果

搜索框是一个使用异步交互来实现的

异步交互：只要页面有局部数据在更新变化，但是整体页面没有变化的时候他一定是异步方法实现的

先来展示一下最后的效果

很明显，当你输入关键词的时候，他会在json文件里进行筛选然后展示出相同的关键字

下面就让我们具体来分析一下这个案例

首先我们得建一个json文件 ，来保存我们的数据。以便我们查找或者做操作，里面的内容我们采用属性和值的方法进行存储

具体如下：

[
    {
    "name":"javascript",
    "value":["javascript","javascript权威指南","javascript高级程序设计"]
    },        
    {
    "name":"jquery",
    "value":  ["jquery","jquery ajax","牛逼的jquery"] 
    }
    
]

接下来就是我们的案例页面，------就是很简单的布局一下搜索框

html

<div class="container">
        <!-- 搜索框 -->
        <input type="text" id="search">
        <!-- 提示框 -->
        <div class="alert">
            <ul>
                
            </ul>
        </div>

    </div>

css

<style>
        .container #search{
            width: 300px;
        }
        .container .alert{
            width: 300px;
        }
        .container .alert ul{
            list-style: none;
            padding: 0;
            margin: 0;
        }
    </style>

最后，也是最重要的部分 ，当然就是我们的Jquery的代码啦。

从效果中可以看出

1. 在不输入内容的情况下不显示
2. 输入有内容显示内容
3. 输入没有内容不显示内容

根据思路可以确定

• 在刷新页面时清空列表内容

• 获取到每一次用户在输入到输入框的内容

• 根据获取到的内容利用方法

  获取到json库的数据

  • 在获取json数据的时候获取到其中的name值
  • 判断用户输入到输入框的内容以及获取到的数据在json数据中是否存在
  • 存在就将json的数据返回添加带HTML页面中显示
  • 不存在则不显示所有内容

• 在输入信息到获取信息到显示信息的时候,要保证提示框要从隐藏状态到显示状态

具体代码如下

<script>
		//搜索框绑定输入事件
        $('#search').bind('input',function(){
            $('.alert>ul').empty();
            //1.根据用户输入的内容,动态获取相关提示数据
            var inputValue=$(this).val()
            $.getJSON('data/server4.json',function(data){
                $.each(data,function(index,obj){
                    var name= obj.name;
                    if(name.indexOf(inputValue)>=0){
                        var value=obj.value;
                        $.each(value,function(index,text){
                            $('.alert>ul').append($('<li>'+text+'</li>'))
                        })
                    }
                })
            })

            //2.将提示框从隐藏状态切换到显示状态
            $('.alert').css('display','block');
        }).bind('blur',function(){
            $('.alert').css('display','none');
        })
    </script>