diff --git a/web/src/components/MyAutoComplete.vue b/web/src/components/MyAutoComplete.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ec762999e749009ecca07006b0e2e0ca84c7e99b
--- /dev/null
+++ b/web/src/components/MyAutoComplete.vue
@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <el-autocomplete
+      ref="autocomplete"
+      v-model="searchKey"
+      :fetch-suggestions="querySearch"
+      clearable
+      :placeholder="props.placeholder"
+      @change="handleChange"
+      @select="handleChange"
+      @keyup.enter.stop="searchInputKey"
+    >
+      <template #suffix>
+        <el-icon class="el-input__icon">
+          <ArrowDown />
+        </el-icon>
+      </template>
+    </el-autocomplete>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+const searchKey = ref("");
+const autocomplete: any = ref(null);
+
+const props = defineProps({
+  all_data: {
+    type: Array,
+    required: true,
+    default: [],
+  },
+  placeholder: {
+    type: String,
+    required: true,
+    default: "请输入关键字",
+  },
+});
+
+const emit = defineEmits<{
+  (e: "change", params: SearchItem, input_key: string): void;
+  (e: "input", input_key: string): void;
+}>();
+
+watch(
+  () => props.all_data,
+  (newV, oldV) => {
+    if (newV) {
+      all_data.value = newV;
+    }
+  }
+);
+
+interface SearchItem {
+  value: string;
+  [key: string]: string;
+}
+const all_data = ref([] as any);
+const querySearch = (queryString: string, cb: any) => {
+  const results = queryString
+    ? all_data.value.filter(createFilter(queryString))
+    : all_data.value;
+  cb(results);
+};
+const createFilter = (queryString: string) => {
+  return (keyword: SearchItem) => {
+    return keyword.value.indexOf(queryString) === 0;
+  };
+};
+
+// 搜索事件
+const handleChange = (value: SearchItem) => {
+  emit("change", value, searchKey.value);
+  if (!value) {
+    $blur();
+  }
+};
+const searchInputKey = () => {
+  emit("input", searchKey.value);
+};
+
+// 失焦事件
+const $blur = () => {
+  autocomplete.value.blur();
+};
+
+defineExpose({
+  searchKey,
+  $blur,
+});
+</script>
+
+<style scoped></style>
diff --git a/web/src/views/ruleList.vue b/web/src/views/ruleList.vue
index 829fadb636bf89b2127c40e699a42ff216075ad8..557ae3bbccfdbfcb5e859e5de7bbc1ef6114ed59 100644
--- a/web/src/views/ruleList.vue
+++ b/web/src/views/ruleList.vue
@@ -5,6 +5,13 @@
   <!-- <box-draggable></box-draggable> -->
   <div class="list shadow">
     <pm-table ref="ruleTableRef" :show-check="false" :show-search="false" :get-data="getRuleList">
+      <template #search_bar>
+        <div style="display: flex; align-items: center">
+          <span>告警级别：</span>
+          <MyAutoComplete ref="autocomplete" :all_data="levels" :placeholder="'请输入告警级别'" @change="handleSearch"
+            @input="searchInputKey" />
+        </div>
+      </template>
       <el-table-column prop="id" label="ID" width="140" />
       <el-table-column prop="alertName" label="告警名称" :show-overflow-tooltip="true" width="220" />
       <el-table-column prop="alertTargets" label="告警主机" :show-overflow-tooltip="true" width="260">
@@ -46,6 +53,7 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
 import pmTable from "@/components/PmTable.vue";
+import MyAutoComplete from "@/components/MyAutoComplete.vue";
 import { getRuleList, delConfigRule, getMetrics } from "@/api/prometheus";
 import type { ConfigRule } from "@/types/rule";
 import { ElMessage } from "element-plus";