วิธีใช้ SearchView สำหรับค้นหาข้อมูลใน ListView Android

ภาพรวม

ตัวอย่างนี้สาธิตการใช้ SearchView ร่วมกับ ListView และ ArrayAdapter เพื่อกรอง (Filter) ข้อมูลในรายการแบบ Real-time

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

สร้างโปรเจกต์ Android ใหม่ใน Android Studio

ขั้นตอนที่ 2: ออกแบบ Layout (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <SearchView
        android:id="@+id/searchView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:iconifiedByDefault="false"
        android:queryHint="ค้นหาผลไม้..." />

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/searchView"
        android:divider="#ad5"
        android:dividerHeight="2dp"/>

</RelativeLayout>

ขั้นตอนที่ 3: เขียนโค้ด MainActivity (src/MainActivity.java)

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.SearchView;
import android.widget.Toast;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    SearchView searchView;
    ListView listView;
    ArrayList<String> fruitList;
    ArrayAdapter<String> adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        searchView = findViewById(R.id.searchView);
        listView = findViewById(R.id.listView);

        // ข้อมูลตัวอย่าง
        fruitList = new ArrayList<>();
        fruitList.add("Apple - แอปเปิ้ล");
        fruitList.add("Banana - กล้วย");
        fruitList.add("Pineapple - สับปะรด");
        fruitList.add("Orange - ส้ม");
        fruitList.add("Mango - มะม่วง");
        fruitList.add("Grapes - องุ่น");
        fruitList.add("Lemon - มะนาว");
        fruitList.add("Melon - แคนตาลูป");
        fruitList.add("Watermelon - แตงโม");
        fruitList.add("Papaya - มะละกอ");

        // ใช้ Built-in layout simple_list_item_1
        adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, fruitList);
        listView.setAdapter(adapter);

        // 🔑 SearchView Listener
        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                // เมื่อกด Enter/Search บนคีย์บอร์ด
                if (fruitList.contains(query)) {
                    adapter.getFilter().filter(query);
                } else {
                    Toast.makeText(MainActivity.this, "ไม่พบ: " + query, Toast.LENGTH_LONG).show();
                }
                return false;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                // 🔑 Real-time filtering ขณะพิมพ์
                adapter.getFilter().filter(newText);
                return false;
            }
        });

        // Optional: Clear focus ตอนเริ่มต้น
        searchView.clearFocus();
    }
}

ขั้นตอนที่ 4: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

SearchView Attributes สำคัญ

Filter แบบ Custom (สำหรับ Object Complex)

// ต้อง Implement Filterable ใน Custom Adapter
public class CustomAdapter extends BaseAdapter implements Filterable {
    private List<Item> originalList;
    private List<Item> filteredList;
    private ItemFilter itemFilter;

    @Override
    public Filter getFilter() {
        if (itemFilter == null) itemFilter = new ItemFilter();
        return itemFilter;
    }

    private class ItemFilter extends Filter {
        @Override
        protected FilterResults performFiltering(CharSequence constraint) {
            FilterResults results = new FilterResults();
            if (constraint == null || constraint.length() == 0) {
                results.values = originalList;
                results.count = originalList.size();
            } else {
                List<Item> filtered = new ArrayList<>();
                for (Item item : originalList) {
                    if (item.getName().toLowerCase().contains(constraint.toString().toLowerCase())) {
                        filtered.add(item);
                    }
                }
                results.values = filtered;
                results.count = filtered.size();
            }
            return results;
        }

        @Override
        protected void publishResults(CharSequence constraint, FilterResults results) {
            filteredList = (List<Item>) results.values;
            notifyDataSetChanged();
        }
    }
}

SearchView ใน Toolbar/ActionBar (Material Design)

<!-- menu/menu_search.xml -->
<menu xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_search"
        android:title="ค้นหา"
        android:icon="@android:drawable/ic_menu_search"
        app:showAsAction="always|collapseActionView"
        app:actionViewClass="android.support.v7.widget.SearchView" />
</menu>

// ใน Activity
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_search, menu);
    SearchView searchView = (SearchView) menu.findItem(R.id.action_search).getActionView();
    // setup listener...
    return true;
}

การทดสอบ

รันแอป พิมพ์ในช่องค้นหา "Apple" จะกรองเหลือแค่ Apple พิมพ์ "มะ" จะเหลือ มะม่วง มะนาว มะละกอ