Rails_admin：如何设置‘添加筛选器’的默认匹配类型

Hey David, let's work through this problem—since you've already dug through docs without luck, here are practical, stack-friendly solutions based on common implementation patterns:

The key is to initialize your filter's match rule state directly to contains (instead of the placeholder "...") and ensure the filter logic runs automatically on load. Here's how to implement this across different tech stacks:

React (with Material UI) #

If you're using MUI's select components for filters, set the initial state to contains and trigger filtering on mount:

import { useState, useEffect } from 'react';
import { Select, MenuItem, FormControl, InputLabel } from '@mui/material';

function FilterControl() {
  // Initialize match rule to "contains" by default
  const [matchRule, setMatchRule] = useState('contains');
  const [filterText, setFilterText] = useState('');

  // Apply filter on mount and whenever rule/text changes
  useEffect(() => {
    applyFilter(filterText, matchRule);
  }, [filterText, matchRule]);

  const applyFilter = (text, rule) => {
    // Replace with your actual filtering logic
    console.log(`Applying ${rule} filter for: ${text}`);
    // Example: Update your data set here
  };

  return (
    <FormControl sx={{ minWidth: 150 }}>
      <InputLabel>Match Type</InputLabel>
      <Select value={matchRule} onChange={(e) => setMatchRule(e.target.value)}>
        <MenuItem value="contains">Contains</MenuItem>
        <MenuItem value="equals">Equals</MenuItem>
        <MenuItem value="startsWith">Starts With</MenuItem>
      </Select>
    </FormControl>
  );
}

Vue (with Element Plus) #

For Vue + Element Plus, bind the select to a ref initialized to contains and run filtering on mount:

<template>
  <div class="filter-group">
    <el-select 
      v-model="matchRule" 
      placeholder="Match Type"
      @change="runFilter"
    >
      <el-option label="Contains" value="contains"></el-option>
      <el-option label="Equals" value="equals"></el-option>
      <el-option label="Starts With" value="startsWith"></el-option>
    </el-select>
    <el-input 
      v-model="filterText" 
      placeholder="Enter filter value"
      @input="runFilter"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// Default match rule set to "contains"
const matchRule = ref('contains');
const filterText = ref('');

const runFilter = () => {
  // Replace with your actual data filtering logic
  console.log(`Filtering with ${matchRule.value}: ${filterText.value}`);
};

// Run filter once on component mount
onMounted(() => runFilter());
</script>

Vanilla JavaScript (No Framework) #

If you're working with plain HTML/JS, set the select's default value and trigger filtering on page load:

<!-- HTML -->
<div class="filter-bar">
  <select id="match-rule-select">
    <option value="contains">Contains</option>
    <option value="equals">Equals</option>
    <option value="startsWith">Starts With</option>
  </select>
  <input type="text" id="filter-input" placeholder="Filter value">
</div>

// JavaScript
const matchRuleSelect = document.getElementById('match-rule-select');
const filterInput = document.getElementById('filter-input');

// Set default selected value to "contains"
matchRuleSelect.value = 'contains';

// Filter function
function applyFilter() {
  const rule = matchRuleSelect.value;
  const value = filterInput.value;
  // Replace with your filtering logic
  console.log(`Applying ${rule} filter: ${value}`);
}

// Trigger filter on load and when inputs change
window.addEventListener('load', applyFilter);
matchRuleSelect.addEventListener('change', applyFilter);
filterInput.addEventListener('input', applyFilter);

• Avoid Placeholder Defaults: Never use a non-functional value like "..." as the initial state—always start with a valid, usable rule.
• Auto-Execute Filter: Make sure the filter runs immediately when the component/page loads so users see the filtered state right away.
• Keep User Control: Maintain all match rule options so users can switch to other types (equals, starts with) whenever needed.

内容的提问来源于stack exchange，提问作者David Gleba