php 模糊匹配选择框,输入框模糊匹配、提示

####目的

实现一个输入框输入之后能够进行模糊查询匹配；这样给输入者提醒和匹配

####实现方式

keyup事件通过ajax调取后台数据

####主要难点

因为输入框是一个input 怎么把提示的信息放到input下让用户选择 这里选择用div包裹ul定位到input框下

#####先来看一下结果：


所用环境是tp3 了解其逻辑后 其他的框架都可以自已拓展。

开始实现

####1.页面以及js和css样式

页面

```

changePosition();//调整div坐标

var uname = $.trim($("#username").val());

if (uname ) {

$.ajax({

type: 'post',

async: true, //同步执行

url: tipUrl, //提交的页面/方法名

data: {'uname':uname},

success: function (data) { //请求成功后处理函数。

//将结果添加到div中

$(".searchresult").empty();

$(".searchresult").append(data);

$(".searchresult").css("display", "block");

//鼠标点击事件

$(".searchresult ul>li").on('click',function(){

$("#username").val($(this).text());

$(".searchresult").css("display", "none");

});

}

});

}

})

//改变坐标

function changePosition(){

var left = $("#username").position().left; //获取距离最左端的距离，像素，整型

$(".searchresult").css("left", left + "px"); //重新定义CSS属性

}

})

```

####控制器

```

/**

* 根据填写的用户名 匹配到所有模糊匹配

*/

public function ajaxUser(){

if(!IS_AJAX)exit('页面不存在');

$username = I('uname');

//当提交的用户名为空时查询所有用户

if($username){

$where['username'] = array('like','%'.$username.'%');

}else{

$where = 1;

}

$res = M('user')->field('username')->where($where)->limit(10)->select();

$str = '';

if($res){

$str .= "

• ";

for($i=0;$i

$str .= "

" .$res[$i]['username']. "";

}

$str .= "

";

}else{

$str .= "

• ";

$str .= "

无";

$str .= "

";

}

echo $str;

}

```