与JQUERY中的自动完成类似的自定义组件_CSS中断与jquery自动完成中的_renderItem_使用Flow.js在react中的自定义按钮组件的vs代码中自动完成 - 腾讯云开发者社区

与JQUERY中的自动完成类似的自定义组件

在Web开发中，类似于jQuery中的自动完成功能，可以使用多种现代前端技术和框架来实现自定义组件。以下是一些流行的方法和示例：

1. 使用原生JavaScript和CSS

你可以使用原生JavaScript和CSS来创建一个简单的自动完成组件。

HTML

<input type="text" id="autocomplete" placeholder="Type to search...">
<div id="suggestions"></div>

CSS

#suggestions {
  border: 1px solid #ccc;
  max-height: 150px;
  overflow-y: auto;
  display: none;
}

.suggestion-item {
  padding: 8px;
  cursor: pointer;
}

.suggestion-item:hover {
  background-color: #f0f0f0;
}

JavaScript

const data = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

document.getElementById('autocomplete').addEventListener('input', function(e) {
  const input = e.target.value.toLowerCase();
  const suggestionsContainer = document.getElementById('suggestions');
  suggestionsContainer.innerHTML = '';

  if (input.length > 0) {
    const filteredData = data.filter(item => item.toLowerCase().includes(input));
    filteredData.forEach(item => {
      const div = document.createElement('div');
      div.className = 'suggestion-item';
      div.textContent = item;
      div.addEventListener('click', function() {
        document.getElementById('autocomplete').value = item;
        suggestionsContainer.style.display = 'none';
      });
      suggestionsContainer.appendChild(div);
    });
    suggestionsContainer.style.display = 'block';
  } else {
    suggestionsContainer.style.display = 'none';
  }
});

2. 使用React

如果你使用React，可以创建一个更复杂和可复用的自动完成组件。

安装依赖

npm install axios

组件代码

import React, { useState } from 'react';
import axios from 'axios';

const Autocomplete = ({ endpoint }) => {
  const [inputValue, setInputValue] = useState('');
  const [suggestions, setSuggestions] = useState([]);

  const handleInputChange = async (e) => {
    const value = e.target.value;
    setInputValue(value);

    if (value.length > 0) {
      try {
        const response = await axios.get(`${endpoint}?query=${value}`);
        setSuggestions(response.data);
      } catch (error) {
        console.error('Error fetching suggestions:', error);
      }
    } else {
      setSuggestions([]);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        placeholder="Type to search..."
      />
      <ul>
        {suggestions.map((suggestion, index) => (
          <li key={index} onClick={() => setInputValue(suggestion)}>
            {suggestion}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Autocomplete;

使用组件

import React from 'react';
import ReactDOM from 'react-dom';
import Autocomplete from './Autocomplete';

const App = () => {
  return (
    <div>
      <h1>Autocomplete Example</h1>
      <Autocomplete endpoint="/api/suggestions" />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

3. 使用Vue.js

如果你使用Vue.js，也可以创建一个类似的自动完成组件。

组件代码

<template>
  <div>
    <input
      type="text"
      v-model="inputValue"
      @input="fetchSuggestions"
      placeholder="Type to search..."
    />
    <ul v-if="suggestions.length">
      <li v-for="(suggestion, index) in suggestions" :key="index" @click="selectSuggestion(suggestion)">
        {{ suggestion }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      suggestions: []
    };
  },
  methods: {
    async fetchSuggestions() {
      if (this.inputValue.length > 0) {
        try {
          const response = await fetch(`/api/suggestions?query=${this.inputValue}`);
          const data = await response.json();
          this.suggestions = data;
        } catch (error) {
          console.error('Error fetching suggestions:', error);
        }
      } else {
        this.suggestions = [];
      }
    },
    selectSuggestion(suggestion) {
      this.inputValue = suggestion;
      this.suggestions = [];
    }
  }
};
</script>

<style>
ul {
  list-style-type: none;
  padding: 0;
  border: 1px solid #ccc;
  max-height: 150px;
  overflow-y: auto;
}

li {
  padding: 8px;
  cursor: pointer;
}

li:hover {
  background-color: #f0f0f0;
}
</style>

使用组件

<template>
  <div>
    <h1>Autocomplete Example</h1>
    <autocomplete />
  </div>
</template>

<script>
import Autocomplete from './Autocomplete.vue';

export default {
  components: {
    Autocomplete
  }
};
</script>

这些示例展示了如何使用原生JavaScript、React和Vue.js来创建类似于jQuery自动完成的组件。你可以根据自己的需求和技术栈选择合适的方法。