iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >iOS 使用UITextField自定义搜索框 实现用户输入完之后“实时搜索”功能
  • 434
分享到

iOS 使用UITextField自定义搜索框 实现用户输入完之后“实时搜索”功能

iosUITextField搜索框搜索 2022-06-01 17:06:18 434人浏览 独家记忆
摘要

注:CSDN的代码块有点捞,如果浏览器窗口较窄,一行代码占了两行的位置,后面的代码就看不到了,大家可以把浏览器窗口拉大一点 UI小姐姐设计的搜索框经常是五花八门,系统的搜索框经常不能

注:CSDN的代码块有点捞,如果浏览器窗口较窄,一行代码占了两行的位置,后面的代码就看不到了,大家可以把浏览器窗口拉大一点

UI小姐姐设计的搜索框经常是五花八门,系统的搜索框经常不能满足我们的需求,需要我们特别定制一个。但是UITextField的诸多回调里面,没有一个是适合触发搜索时间的。 UITextFieldTextDidChangeNotification调用过于频繁,每输入一个字符就调一次接口怕是不太合适。 UITextFieldTextDidEndEditingNotification只有在结束编辑的时候才会调一次,结束编辑就意味着键盘消失了,也不太合适。 这样就难倒我们了吗,当然不是,办法还是有滴。

解决方案

先自定义一个搜索框 改好样式,然后监听UITextFieldTextDidChangeNotification


- (void)textFieldDidChange{
 if (self.searchDelegate && [self.searchDelegate respondsToSelector:@selector(customSearchBar:textDidChange:)]) {
 [self.searchDelegate customSearchBar:self textDidChange:self.text];
 }
}

使用


@property (nonatomic, strong) LGCustomSearchBar *searchBar;
@property (nonatomic, assign) NSInteger inputCount; 记录输入次数

- (void)viewDidLoad {
 [super viewDidLoad];
 self.searchBar = [[LGCustomSearchBar alloc] initWithFrame:CGRectMake(20, 10, kScreenWidth-40, 36)];
 self.searchBar.searchDelegate = self;
 [self.view addSubview:self.searchBar];
}
- (void)customSearchBar:(LGCustomSearchBar *)searchBar textDidChange:(NSString *)searchText{
 if (searchText.length == 0) {
 [self searchKeyWord:@(self.inputCount)];
 }
 else{
 self.inputCount++;
 [self perfORMSelector:@selector(searchKeyword:) withObject:@(self.inputCount) afterDelay:1.5f];
 }
}
- (void)searchKeyword:(NSNumber *)inputCount{
	// 判断不等于0是为了防止用户输入完直接点击搜索,延时结束之后又搜索一次
 if (inputCount.integerValue == self.inputCount && self.inputCount != 0) {
 [self loadData];
 }
}
- (BOOL)textFieldShouldReturn:(UITextField *)textField{
 [self loadData];
 return NO;
}
- (void)loadData{
 self.inputCount = 0;
	// 本地查询 或者 请求数据
	...
 [self.tableView reloadData];
}

核心代码

延迟1.5秒以后执行搜索,判读如果1.5秒之后传入的输入次数和现在的输入次数一致,说明用户1.5秒已经没有输入新内容了,加在新数据。这个时间可以自己调整


[self performSelector:@selector(searchKeyword:) withObject:@(self.inputCount) 
afterDelay:1.5f];

总结

到此这篇关于iOS 使用UITextField自定义搜索框 实现用户输入完之后“实时搜索”功能的文章就介绍到这了,更多相关ios UITextField自定义搜索框 实时搜索内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: iOS 使用UITextField自定义搜索框 实现用户输入完之后“实时搜索”功能

本文链接: https://www.lsjlt.com/news/30457.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue3指令之搜索框输入防抖功能实现
    目录前言防抖 & 节流防抖节流输入防抖存在的问题指令实现总结前言 「搜索」这个场景在各种业务的系统中都是是非常常见的,比如电商平台的商品搜索、百度搜索、掘金搜索、google...
    99+
    2022-12-29
    vue输入防抖动 vue中使用防抖 Vue3搜索框输入防抖
  • 怎么使用Python实现搜索功能
    在Python中实现搜索功能通常使用内置的数据结构和算法来实现,以下是一个简单的例子: def search(arr, target...
    99+
    2024-03-02
    Python
  • 如何使用 PHP 实现搜索功能
    通过以下步骤实现 php 搜索功能:建立数据库连接定义搜索查询(使用 like 运算符)执行查询并获取结果显示搜索结果(按用户输入的搜索词筛选) 如何使用 PHP 实现搜索功能 搜索功...
    99+
    2024-05-02
    搜索 php mysql
  • css如何实现输入自动提示搜索提示功能
    这篇文章将为大家详细讲解有关css如何实现输入自动提示搜索提示功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。代码如下:.sugLayerDiv{ position:relative;&nbs...
    99+
    2023-06-08
  • 使用微信小程序实现搜索框自动补全功能
    使用微信小程序实现搜索框自动补全功能 随着移动互联网的发展,微信小程序成为了人们生活中不可或缺的一部分。在小程序中,搜索功能是非常常见的需求之一。为了提升用户体验,搜索框的自动补全功能是一个很好的加分项。本文将介绍如何使用微信小程序实现搜索...
    99+
    2023-11-21
    搜索框 微信小程序 自动补全功能
  • 怎么用ajax+php实现搜索框自动填充功能
    这篇文章主要讲解了“怎么用ajax+php实现搜索框自动填充功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用ajax+php实现搜索框自动填充功能”...
    99+
    2024-04-02
  • 怎么使用vue实现可搜索下拉框功能
    本篇内容主要讲解“怎么使用vue实现可搜索下拉框功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么使用vue实现可搜索下拉框功能”吧!效果图:子组件 DROPDOWN.VUE<...
    99+
    2023-07-04
  • JS如何模仿淘宝实现搜索框用户输入事件
    小编给大家分享一下JS如何模仿淘宝实现搜索框用户输入事件,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!淘宝是我们经常用的一个网上...
    99+
    2024-04-02
  • Bootstrap如何使用Table实现搜索框和查询功能
    这篇文章主要为大家展示了“Bootstrap如何使用Table实现搜索框和查询功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Bootstrap如何使用Tab...
    99+
    2024-04-02
  • react+axios实现github搜索用户功能(示例代码)
    加载 请求成功 请求失败 在文件路径点击cmd 回车 首先把服务器打开 npm start app.js import React, { Component } ...
    99+
    2024-04-02
  • 如何使用solr实现商品的搜索功能
    小编给大家分享一下如何使用solr实现商品的搜索功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!为什么要用solr服务,为什么要用luncence?问题提出:当...
    99+
    2023-05-30
    solr
  • Angular如何使用输入框实现自定义验证功能
    这篇文章将为大家详细讲解有关Angular如何使用输入框实现自定义验证功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。此插件使用angular.js、JQuery实现。...
    99+
    2024-04-02
  • 利用bootstrap怎么实现一个下拉框搜索功能
    本篇文章为大家展示了利用bootstrap怎么实现一个下拉框搜索功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。1、第一个下拉框代码<div class="btn-gro...
    99+
    2023-05-31
    bootstrap strap
  • 使用Ajax怎么实现一个百度搜索框的自动提示功能
    这篇文章给大家介绍使用Ajax怎么实现一个百度搜索框的自动提示功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。<%@ page language="java" ...
    99+
    2023-06-08
  • Vue使用高德地图选点定位搜索定位功能实现
    目录一、申请高德地图的使用密钥key。二、安装依赖。三、使用。四、常见问题。项目下载: 高德地图测试demo,高德地图测试demo-Node.js文档 效果图: 一、申请高德地图的...
    99+
    2022-11-13
    vue高德地图定位 vue高德地图搜索定位
  • 使用Html5怎么实现一个语音搜索功能
    这篇文章给大家介绍使用Html5怎么实现一个语音搜索功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。html是什么html的全称为超文本标记语言,它是一种标记语言,包含了一系列标签.通过这些标签可以将网络上的文档格式...
    99+
    2023-06-09
  • Vue2使用cube-ui实现搜索过滤、高亮功能
    目录前言一、需求流程:功能实现总结介绍 cube-ui 是基于 Vue.js 实现的精致移动端组件库。 特性 质量可靠由滴滴内部组件库精简提炼而来,经历了业务一年多的考验,...
    99+
    2023-01-07
    vue搜索过滤高亮 vue搜索过滤
  • 使用Ajax怎么实现一个搜索分页功能
    使用Ajax怎么实现一个搜索分页功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。什么是ajaxajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,可以通...
    99+
    2023-06-08
  • 如何使用MongoDB实现数据的全文搜索功能
    如何使用MongoDB实现数据的全文搜索功能导语:随着信息化时代的迅猛发展,全文搜索功能成为了许多应用程序的必备功能。作为一个流行的NoSQL数据库,MongoDB也提供了强大的全文搜索能力。本文将介绍如何使用MongoDB实现数据的全文搜...
    99+
    2023-10-22
    MongoDB 全文搜索 数据实现
  • 如何使用php函数来优化搜索功能的实现?
    在开发网站或应用程序时,实现一个强大有效的搜索功能是至关重要的。PHP 提供了许多内置函数和扩展,可以帮助我们优化搜索功能的实现。本文将介绍几种常用的 PHP 函数及其使用示例,以帮助您优化搜索功能的开发。stripos() 函数strip...
    99+
    2023-10-21
    PHP搜索优化:function_search PHP搜索功能:optimize_search 搜索功能实现:php_f
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作