diff --git a/src/components/MagicInput/index.jsx b/src/components/MagicInput/index.jsx
index a5824827..16bc5de0 100644
--- a/src/components/MagicInput/index.jsx
+++ b/src/components/MagicInput/index.jsx
@@ -17,7 +17,7 @@ import PropTypes from 'prop-types';
 import { Input, Tag, Menu, Divider, Button, Checkbox } from 'antd';
 import { CloseOutlined, SearchOutlined } from '@ant-design/icons';
 import classnames from 'classnames';
-import { isEmpty } from 'lodash';
+import { isEmpty, isBoolean } from 'lodash';
 import styles from './index.less';
 
 const option = PropTypes.shape({
@@ -265,7 +265,10 @@ class MagicInput extends PureComponent {
       const { options } = filter;
       let label = value;
       if (options) {
-        const current = options.find((item) => item.key === value);
+        const current = options.find((item) => {
+          const key = isBoolean(item.key) ? item.key.toString() : item.key;
+          return key === (isBoolean(value) ? value.toString() : value);
+        });
         label = current ? current.label : value;
       }
       return (
diff --git a/src/resources/security-group-rule.jsx b/src/resources/security-group-rule.jsx
index f720ca1d..0d895ff8 100644
--- a/src/resources/security-group-rule.jsx
+++ b/src/resources/security-group-rule.jsx
@@ -113,6 +113,14 @@ export const getSelfColumns = (self) => [
 ];
 
 export const filterParams = [
+  {
+    label: t('Remote IP Prefix'),
+    name: 'remote_ip_prefix',
+    filterFunc: (record, value) => {
+      const recordValue = record || '0.0.0.0/0';
+      return recordValue.includes(value);
+    },
+  },
   {
     label: t('Direction'),
     name: 'direction',