即时通信 IM ConversationSearch-聊天互动（含 UI）-文档中心-腾讯云

ConversationSearch 主要用于搜索会话列表，由 ConversationSearchInput 与 ConversationSearchResult 组成。
基础使用
在 ConversationList 中使用
独立使用
import { UIKitProvider, ConversationList, ConversationSearch, IConversationSearchProps } from '@tencentcloud/chat-uikit-react';
import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
﻿
const CustomConversationSearch = (props: IConversationSearchProps) => {
  const onSelectResult = (conversation: IConversationModel) => {
    console.warn(`Select Search Result: ${conversation.conversationID}`);
  };
  return (
    <ConversationSearch {...props} onSelectResult={onSelectResult} />
  );
};
﻿
const App = () => {
  return (
    <UIKitProvider>
      <ConversationList
        style={{ maxWidth: '300px', height: '600px' }}
        ConversationSearch={CustomConversationSearch}
       />
     </UIKitProvider>
  );
};
import { UIKitProvider, ConversationListProvider, useConversationList, ConversationSearch } from '@tencentcloud/chat-uikit-react';

const CustomConversationSearch = () => {
  const { conversationList } = useConversationList();
  return (
    <ConversationSearch
      style={{ maxWidth: '300px', maxHeight: '500px' }}
      conversationList={conversationList}
    />
  );
};
﻿
const App = () => {
  return (
    <UIKitProvider>
      <ConversationListProvider>
        <CustomConversationSearch />
      </ConversationListProvider>
    </UIKitProvider>
  );
};
Props
参数名
类型
默认值
说明
conversationList
(Required)
﻿IConversationModel﻿
-
必选参数，搜索的目标会话列表。当在 <ConversationList> 中使用时，默认传入 Context 中获取的 conversationList 值作为目标搜索列表。
Avatar
ReactElement
Avatar
自定义搜索结果中的头像组件。
ResultPreview
ReactElement
ConversationPreview
自定义搜索结果列表的单条结果预览组件。
ConversationSearchInput
ReactElement
ConversationSearchInput
自定义搜索输入框组件。
ConversationSearchResult
ReactElement
ConversationSearchResult
自定义搜索结果组件。
searchFn
(searchValue: string, conversationList: IConversationModel[]) => IConversationModel[]
﻿defaultSearchFn﻿
指定一个函数来自定义搜索算法。该函数接收搜索值和对话列表作为参数，并返回搜索结果。
onSearchChange
(searchValue: string) => void
-
指定一个函数，当搜索输入变化时调用。该函数接收当前搜索值作为参数。
onFocus
(event: React.FocusEvent<HTMLInputElement>) => void
-
指定一个函数，当搜索输入获得焦点时调用。
onBlur
(event: React.FocusEvent<HTMLInputElement>) => void
-
指定一个函数，当搜索输入失去焦点时调用。
onSelectResult
(conversation: IConversationModel) => void
-
指定一个函数，当选择一个搜索结果时调用。该函数接收选中的对话作为参数。
visible
Boolean
true
指定搜索组件是否可见。
className
String 
-
指定搜索组件的自定义类名。
style
React.CSSProperties
-
自定义 CSS 样式。
搜索规则
默认搜索规则
当 searchFn 没有传入搜索规则时，searchFn 将采用默认值 defaultSearchFn 作为搜索规则。
defaultSearchFn 默认对会话列表中的会话 title 信息进行搜索匹配，模糊大小写。defaultSearchFn 定义如下：
function defaultSearchFn(searchValue: string, conversationList: IConversationModel[]) {
  if (!searchValue || conversationList?.length === 0) return [];
  return conversationList.filter(item => item.getShowName().toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()));
}
自定义搜索规则
您可以通过传入 searchFn props 来实现不同的搜索规则。以下是一个根据会话列表中 conversationID 信息进行搜索的示例：
function customSearchFn(searchValue: string, conversationList: IConversationModel[]) {
  if (!searchValue || conversationList?.length === 0) return [];
  return conversationList.filter(item => item.conversationID.includes(searchValue));
}
﻿
<ConversationSearch {...props} searchFn={customSearchFn} />
事件处理
ConversationSearch提供了丰富的 props 来帮助您自定义对于各种搜索状态的响应。
onSearchChange当搜索输入变化时调用。
onFocus当搜索输入获得焦点时调用。
onBlur当搜索输入获得焦点时调用。
onSelectResult当选择一个搜索结果时调用。
自定义组件
ConversationSearchInput
参数名
类型
默认值
说明
placeholder
String
-
输入框占位符文本。
clearable
Boolean
false
是否可清除输入内容。
prefix
ReactNode
<Icon type={IconTypes.SEARCH} height={16} width={16} />
输入框前缀内容。
value
String
-
输入框的值。
onChange
(event: React.ChangeEvent<HTMLInputElement>) => void
-
指定一个函数，当搜索输入变化时调用。
onFocus
(event: React.FocusEvent<HTMLInputElement>) => void
-
指定一个函数，当搜索输入获得焦点时调用。
onBlur
(event: React.FocusEvent<HTMLInputElement>) => void
-
指定一个函数，当搜索输入失去焦点时调用。
className
String
-
自定义类名。
以下是自定义一个新的  placeholder 与 prefix 示例：
const CustomConversationSearchInput = (props: IConversationSearchInputProps) => {
  return <ConversationSearchInput {...props} placeholder="this is a custom placeholder" prefix="?" />;
};

const CustomConversationSearch = (props: IConversationSearchProps) => {
  return <ConversationSearch {...props} ConversationSearchInput={CustomConversationSearchInput} />;
};
修改前
修改后
﻿
﻿
﻿
﻿
﻿
﻿
ConversationSearchResult
参数名
类型
默认值
说明
visible
Boolean
false
是否显示搜索结果组件。
searchResult
﻿IConversationModel[]
-
搜索结果。
searchValue
String
-
搜索输入值。
ResultPreview
ReactElement
ConversationPreview
自定义 ResultPreview 组件。
Avatar
ReactElement
Avatar
自定义 Avatar 组件。
PlaceholderNoResult
ReactNode
<PlaceHolder type={PlaceHolderTypes.NO_RESULTS} searchString={searchValue} />
自定义无结果时的占位组件。
onSelectResult
(conversation: IConversationModel) => void
-
当 ResultPreview 被点击时的回调函数。
className
String
-
自定义类名。
style
React.CSSProperties
-
自定义 CSS 样式。
以下是自定义一个新的无搜索结果界面  PlaceholderNoResult  示例：
const CustomConversationSearchResult = (props: IConversationSearchResultProps) => {
  const CustomPlaceholder = (
    <div style={{ display: 'flex', flex: '1', justifyContent: 'center', alignItems: 'center' }}>
      <img src="https://web.sdk.qcloud.com/im/assets/emoji/emoji_76@2x.png" alt="tears" />
    </div>
  );
  return <ConversationSearchResult {...props} PlaceholderNoResult={CustomPlaceholder} />;
};
﻿
const CustomConversationSearch = (props: IConversationSearchProps) => {
  return <ConversationSearch {...props} ConversationSearchResult={CustomConversationSearchResult} />;
};
修改前
修改后
﻿
﻿
﻿
﻿
﻿
﻿
ResultPreview
ResultPreview 参数用于在 ConversationSearchResult 中展示单条搜索结果。
当没有值传入时，ResultPreview 默认展示 ConversationPreview 组件作为单条搜索结果组件。
您可前往 ConversationPreview 查看更多自定义教程。
﻿
﻿

参数名	类型	默认值	说明
conversationList (Required)	IConversationModel	-	必选参数，搜索的目标会话列表。当在 `<ConversationList>` 中使用时，默认传入 Context 中获取的 conversationList 值作为目标搜索列表。
Avatar	`ReactElement`	`Avatar`	自定义搜索结果中的头像组件。
ResultPreview	`ReactElement`	`ConversationPreview`	自定义搜索结果列表的单条结果预览组件。
ConversationSearchInput	`ReactElement`	`ConversationSearchInput`	自定义搜索输入框组件。
ConversationSearchResult	`ReactElement`	`ConversationSearchResult`	自定义搜索结果组件。
searchFn	(searchValue: string, conversationList: IConversationModel[]) => IConversationModel[]	defaultSearchFn	指定一个函数来自定义搜索算法。该函数接收搜索值和对话列表作为参数，并返回搜索结果。
onSearchChange	(searchValue: string) => void	-	指定一个函数，当搜索输入变化时调用。该函数接收当前搜索值作为参数。
onFocus	(event: React.FocusEvent<HTMLInputElement>) => void	-	指定一个函数，当搜索输入获得焦点时调用。
onBlur	(event: React.FocusEvent<HTMLInputElement>) => void	-	指定一个函数，当搜索输入失去焦点时调用。
onSelectResult	(conversation: IConversationModel) => void	-	指定一个函数，当选择一个搜索结果时调用。该函数接收选中的对话作为参数。
visible	`Boolean`	`true`	指定搜索组件是否可见。
className	`String`	-	指定搜索组件的自定义类名。
style	`React.CSSProperties`	-	自定义 CSS 样式。

参数名	类型	默认值	说明
visible	`Boolean`	false	是否显示搜索结果组件。
searchResult	IConversationModel[]	-	搜索结果。
searchValue	`String`	-	搜索输入值。
ResultPreview	`ReactElement`	`ConversationPreview`	自定义 `ResultPreview` 组件。
Avatar	`ReactElement`	`Avatar`	自定义 `Avatar` 组件。
PlaceholderNoResult	`ReactNode`	<PlaceHolder type={PlaceHolderTypes.NO_RESULTS} searchString={searchValue} />	自定义无结果时的占位组件。
onSelectResult	(conversation: IConversationModel) => void	-	当 `ResultPreview` 被点击时的回调函数。
className	`String`	-	自定义类名。
style	`React.CSSProperties`	-	自定义 CSS 样式。

修改前	修改后

修改前	修改后

ConversationSearch

本页目录：

基础使用

Props

搜索规则

默认搜索规则

自定义搜索规则

事件处理

自定义组件

ConversationSearchInput

ConversationSearchResult

ResultPreview

﻿