Question

How can I build a search bar where while I'm typing the results are shown in the ListView in which I'm searching?

For example, I have a list view with 20 strings. I press the search key and appears the bar. I want when I type 3 words or more the search starts running showing the results in the list view (as a filter: only shows the strings in the list that matching what I type)

Was it helpful?

Solution

You can't do this with the search bar. But the listview has a possibility to filter on key pressed, like it is done in the contacts. The user simply starts typing and the list gets filtered then. Filtering is not really like searching. If you list contains the word foo somewhere and you type oo foo will be filtered out, but if you type fo it will stay even if the list item is call bar foo.

You simply have to enable it:

ListView lv = getListView();
lv.setTextFilterEnabled(true);

I don't know how this is done if you don't have a hardware keyboard. I'm using the droid and starting to type starts the list to filter and to show only matching results.

OTHER TIPS

I believe this is what you are looking for:

http://www.java2s.com/Code/Android/2D-Graphics/ShowsalistthatcanbefilteredinplacewithaSearchViewinnoniconifiedmode.htm

Have your Activity implement SearchView.OnQueryTextListener

and add the following methods:

public boolean onQueryTextChange(String newText) {
    if (TextUtils.isEmpty(newText)) {
        mListView.clearTextFilter();
    } else {
        mListView.setFilterText(newText.toString());
    }
    return true;
}

public boolean onQueryTextSubmit(String query) {
    return false;
}

I used an EditText to do the job.

First I created two copies of the array to hold the list of data to search:

List<Map<String,String>> vehicleinfo;
List<Map<String,String>> vehicleinfodisplay;

Once I've got my list data from somewhere, I copy it:

for(Map<String,String>map : vehicleinfo)
{
    vehicleinfodisplay.add(map);
}

and use a SimpleAdapter to display the display (copied) version of my data:

String[] from={"vehicle","dateon","dateoff","reg"};
int[] to={R.id.vehicle,R.id.vehicledateon,R.id.vehicledateoff,R.id.vehiclereg};
listadapter=new SimpleAdapter(c,vehicleinfodisplay,R.layout.vehiclelistrow,from,to);
vehiclelist.setAdapter(listadapter);

Then I added a TextWatcher to the EditText which responds to an afterTextChanged event by clearing the display version of the list and then adding back only the items from the other list that meet the search criteria (in this case the "reg" field contains the search string). Once the display list is populated with the filtered list, I just call notifyDataSetChanged on the list's SimpleAdapter.

searchbox.addTextChangedListener(new TextWatcher()
{
    @Override
    public void afterTextChanged(Editable s)
    {
        vehicleinfodisplay.clear();
        String search=s.toString();
        for(Map<String,String>map : vehicleinfo)
        {
            if(map.get("reg").toLowerCase().contains(search.toLowerCase()))
                vehicleinfodisplay.add(map);
            listadapter.notifyDataSetChanged();
        }
    };
    ... other overridden methods can go here ...
});

Hope this is helpful to someone.

Use following code to implement search and filter list in android:

SearchAndFilterList.java

public class SearchAndFilterList extends Activity {

    private ListView mSearchNFilterLv;

    private EditText mSearchEdt;

    private ArrayList<String> mStringList;

    private ValueAdapter valueAdapter;

    private TextWatcher mSearchTw;

    @Override
    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_search_and_filter_list);

        initUI();

        initData();

        valueAdapter=new ValueAdapter(mStringList,this);

        mSearchNFilterLv.setAdapter(valueAdapter);

        mSearchEdt.addTextChangedListener(mSearchTw);


    }
    private void initData() {

        mStringList=new ArrayList<String>();

        mStringList.add("one");

        mStringList.add("two");

        mStringList.add("three");

        mStringList.add("four");

        mStringList.add("five");

        mStringList.add("six");

        mStringList.add("seven");

        mStringList.add("eight");

        mStringList.add("nine");

        mStringList.add("ten");

        mStringList.add("eleven");

        mStringList.add("twelve");

        mStringList.add("thirteen");

        mStringList.add("fourteen");

        mSearchTw=new TextWatcher() {

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

                valueAdapter.getFilter().filter(s);
            }

            @Override
            public void beforeTextChanged(CharSequence s, int start, int count,
                    int after) {

            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        };

    }

    private void initUI() {

        mSearchNFilterLv=(ListView) findViewById(R.id.list_view);

        mSearchEdt=(EditText) findViewById(R.id.txt_search);
    }

}

Custom Value adapter: ValueAdapter.java

public class ValueAdapter extends BaseAdapter implements Filterable{

    private ArrayList<String> mStringList;

    private ArrayList<String> mStringFilterList;

    private LayoutInflater mInflater;

    private ValueFilter valueFilter;

    public ValueAdapter(ArrayList<String> mStringList,Context context) {

        this.mStringList=mStringList;

        this.mStringFilterList=mStringList;

        mInflater=LayoutInflater.from(context);

        getFilter();
    }

    //How many items are in the data set represented by this Adapter.
    @Override
    public int getCount() {

        return mStringList.size();
    }

    //Get the data item associated with the specified position in the data set.
    @Override
    public Object getItem(int position) {

        return mStringList.get(position);
    }

    //Get the row id associated with the specified position in the list.
    @Override
    public long getItemId(int position) {

        return position;
    }

    //Get a View that displays the data at the specified position in the data set.
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        Holder viewHolder;

        if(convertView==null) {

            viewHolder=new Holder();

            convertView=mInflater.inflate(R.layout.list_item,null);

            viewHolder.nameTv=(TextView)convertView.findViewById(R.id.txt_listitem);

            convertView.setTag(viewHolder);

        }else{

            viewHolder=(Holder)convertView.getTag();
        }

            viewHolder.nameTv.setText(mStringList.get(position).toString());

            return convertView;
    }

    private class  Holder{

        TextView nameTv;
    }

    //Returns a filter that can be used to constrain data with a filtering pattern.
    @Override
    public Filter getFilter() {

        if(valueFilter==null) {

            valueFilter=new ValueFilter();
        }

        return valueFilter;
    }


    private class ValueFilter extends Filter {


        //Invoked in a worker thread to filter the data according to the constraint.
        @Override
        protected FilterResults performFiltering(CharSequence constraint) {

            FilterResults results=new FilterResults();

            if(constraint!=null && constraint.length()>0){

                ArrayList<String> filterList=new ArrayList<String>();

                for(int i=0;i<mStringFilterList.size();i++){

                    if(mStringFilterList.get(i).contains(constraint)) {

                        filterList.add(mStringFilterList.get(i));

                    }
                }


                results.count=filterList.size();

                results.values=filterList;

            }else{

                results.count=mStringFilterList.size();

                results.values=mStringFilterList;

            }

            return results;
        }


        //Invoked in the UI thread to publish the filtering results in the user interface.
        @SuppressWarnings("unchecked")
        @Override
        protected void publishResults(CharSequence constraint,
                FilterResults results) {

            mStringList=(ArrayList<String>) results.values;

            notifyDataSetChanged();


        }

    }

}

activity_search_and_filter_list.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txt_search"
        tools:context=".SearchAndFilterList"
        android:hint="Enter text to search" />
    <ListView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/list_view"
        android:layout_below="@+id/txt_search"></ListView>

</RelativeLayout>

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/txt_listitem"/>

</RelativeLayout>

AndroidManifext.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.searchandfilterlistview"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".SearchAndFilterList"
            android:label="@string/title_activity_search_and_filter_list" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

I hope this code will will helpful to implement custom search and filter listview

The best way is to use the built in search bar or SearchManager by overriding onSearchRequested in a searchable activity. You can set a datasource to search on to get the automatic drop down of results or you can just take in the input from the user and search after. Here is a good overview of SearchManager is a Plus there is a working demo in the API Demos project com.example.android.apis.app.SearchQueryResult

@Override
public boolean onSearchRequested() {
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top