android模糊输入框,Android输入框实时模糊搜索效果的示例代码

Android输入框实时模糊搜索

很多开发场景会用到搜索框实时模糊搜索来帮助用户输入内容,如图

522b2f5877cafdb6e10ce233278fdbdb.gif

思路是在EditText 字符变动的时候 弹出ListPopupwindow并更新列表,这样的做法google已经封装为AutoCompleteTextView

用法

mAutoCompleteTextView.setAdapter(adapter);

mAutoCompleteTextView.setFocusable(true);

mAutoCompleteTextView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override

public void onItemClick(AdapterView> parent, View view, int position, long id) {

}

});

adapter自定义

Adapter 继承 BaseApdater 需要实现 Filterable 接口

private class SearchAdapter extends BaseAdapter implements Filterable {

private Context mContext;

public SearchAdapter(Context context) {

super();

this.mContext = context;

}

@Override

public int getCount() {

if (mSearchCustomEntities == null) {

return 0;

} else {

return mSearchCustomEntities.size();

}

}

@Override

public Object getItem(int position) {

if (mSearchCustomEntities == null) {

return null;

} else {

return mSearchCustomEntities.get(position);

}

}

@Override

public long getItemId(int position) {

return position;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

ViewHolder holder = null;

if (convertView == null) {

holder = new ViewHolder();

convertView = LayoutInflater.from(mContext).inflate(R.layout.item_search_custom, null, false);

holder.tag = (TextView) convertView.findViewById(R.id.tv_custome_type);

holder.name = (TextView) convertView.findViewById(R.id.custom_name);

holder.phone = (TextView) convertView.findViewById(R.id.tv_phone);

convertView.setTag(holder);

} else {

holder = (ViewHolder) convertView.getTag();

}

holder.phone.setText(mSearchCustomEntities.get(position).phone);

holder.name.setText(mSearchCustomEntities.get(position).name);

if (mSearchCustomEntities.get(position).type == CustomerType.TEMPORARY_CUSTOMER.getType()) {

holder.tag.setVisibility(View.VISIBLE);

holder.tag.setText(mContext.getString(R.string.tag_temp));

holder.tag.setTextColor(mContext.getResources().getColor(R.color.customer_temp_txt));

holder.tag.setBackground(mContext.getResources().getDrawable(R.drawable.bg_solid_quote_type_inner_temp));

} else if (mSearchCustomEntities.get(position).type == CustomerType.COLLECTIVE_UNIT.getType()) {

holder.tag.setVisibility(View.VISIBLE);

holder.tag.setText(mContext.getString(R.string.tag_unit));

holder.tag.setTextColor(mContext.getResources().getColor(R.color.customer_unit_txt));

holder.tag.setBackground(mContext.getResources().getDrawable(R.drawable.bg_solid_quote_type_inner_unit));

} else if (mSearchCustomEntities.get(position).type == CustomerType.OUTER_MOTORCADE.getType()) {

holder.tag.setVisibility(View.VISIBLE);

holder.tag.setText(mContext.getString(R.string.tag_car));

holder.tag.setTextColor(mContext.getResources().getColor(R.color.customer_car_txt));

holder.tag.setBackground(mContext.getResources().getDrawable(R.drawable.bg_solid_quote_type_inner_car));

} else {

holder.tag.setVisibility(View.GONE);

}

return convertView;

}

@Override

public Filter getFilter() {

if (mFilter == null) {

mFilter = new ArrayFilter();

}

return mFilter;

}

private class ViewHolder {

TextView tag;

TextView name;

TextView phone;

}

自定义 过滤器

private class ArrayFilter extends Filter {

@Override

protected FilterResults performFiltering(CharSequence prefix) {

FilterResults results = new FilterResults();

String prefixString = prefix.toString();

//筛选部分

XbcClient.getCustomList(prefixString, new EntitiesObserver() {

@Override

protected void onGot(List entities, String msg, int errCode) {

if (entities != null && entities.size() > 0) {

mSearchCustomEntities.clear();

mSearchCustomEntities.addAll(entities);

mSearchAdapter.notifyDataSetChanged();

}else{

if (mSearchCustomEntities!=null & mSearchCustomEntities.size()>0) {

mSearchCustomEntities.clear();

mSearchAdapter.notifyDataSetInvalidated();

}

}

}

});

results.values = mSearchCustomEntities;

results.count = mSearchCustomEntities.size();

return results;

}

总结

到此这篇关于Android输入框实时模糊搜索效果的示例代码的文章就介绍到这了,更多相关android输入框实时模糊搜索内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-08-07

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML输入模糊查询示例代码: ```html <label for="search">搜索:</label> <input type="text" id="search" onkeyup="searchFunction()" placeholder="输入关键词进行搜索..."> <ul id="result"></ul> ``` JavaScript模糊查询函数: ```javascript function searchFunction() { // 获取输入框的值 var input = document.getElementById("search"); var filter = input.value.toUpperCase(); // 获取需要查询的列表 var ul = document.getElementById("result"); var li = ul.getElementsByTagName("li"); // 遍历列表,将匹配的项显示出来,未匹配的项隐藏 for (var i = 0; i < li.length; i++) { var a = li[i].getElementsByTagName("a")[0]; if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } ``` Vue输入模糊查询示例代码: ```html <template> <div> <label for="search">搜索:</label> <input type="text" id="search" v-model="searchText" placeholder="输入关键词进行搜索..."> <ul> <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { searchText: '', items: [ { id: 1, name: '苹果' }, { id: 2, name: '香蕉' }, { id: 3, name: '橘子' }, { id: 4, name: '菠萝' }, { id: 5, name: '草莓' } ] }; }, computed: { filteredItems() { return this.items.filter(item => { return item.name.toLowerCase().includes(this.searchText.toLowerCase()); }); } } }; </script> ``` 在Vue中,我们使用`v-model`指令将输入框的值绑定到Vue实例的`searchText`属性上。然后,我们使用计算属性`filteredItems`过滤出匹配的项,并在模板中使用`v-for`指令渲染出来。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值