検索ボックスの検索アイコンの動作
ユーザーが入力して検索できることをユーザーに知らせるために、右側に検索アイコンが付いた検索ボックスがあります。インスタント検索を実装して、結果が検索ボックスのすぐ下に表示されるようにします。 
しかし、ユーザーがそのアイコンをクリックしたときにそのアイコンをどうするかは、次の2つの場合にわかりません。
検索ボックスは空で、まだ触れられていません
結果が表示された検索ボックス
これは、私が過去に同じような状況で行ったことです。
検索アイコンをテキストボックスの左側に移動し、検索を明示的に示すアクションを導入します。以下が私のアドバイスの理由です。
検索ボックスは空で、まだ触れられていません
このシナリオでは、検索アイコンはテキストボックスのラベルのように機能します。これは、ボタンをクリックするとテキストボックスにフォーカスがあり、ユーザーがテキストボックスに入力を開始できることを意味します
いくつかの結果を持つ検索ボックス
この場合、検索ボタンがクリックされた場合、ユーザーはインスタント検索結果でユーザーが見つけられないものを探しているようです。私は過去に予約エンジンに取り組んだことがあり、私たちのシナリオでは、目的地とともにプロパティ名を含むインスタント検索結果があり、結果は10に制限されていました。結果を選択すると、ユーザーはプロパティまたは目的地ページに移動します。さらに、ユーザーが探している結果が結果セットの一部でない場合に、ユーザーの行き詰まりを回避するための明示的な検索ボタンも組み込まれました。可能であれば、この検索ボタンのクリックを測定して、クリック数が多い場合に発生するクリック数を確認すると、検索アルゴリズムを調整するための指標となります。
お役に立てれば。必要に応じてさらにチャットしてください！
最初に考えるべきことは、その検索アイコンで本当に何かをする必要があるかどうかわからないということです。ユーザーに十分なフィードバックをより簡単な方法で提供できると思います。たとえば、入力/入力時の検索ボックスのテキストは、100％の不透明度に対して空の場合の不透明度が低くなります。
たとえば、Amazonには同様の虫眼鏡検索アイコンがありますが、検索後も変わりません。ホバーしたときに微妙に変化します。あなたが本当にwantでアイコンを変更する場合、おそらく、空のときに虫眼鏡を塗りつぶすか、塗りつぶさないようにします。
提供されたケースに基づく：
- 何もしない
「null」キーワードは検索できません。 「何もしない」は、この検索ボックスが検索を開始するためにキーワードを必要としたという考えをユーザーに与えます。
- 彼らが初めてそれを検索するときのように、結果をリロードします。
何度も何度も同じことをしているように見えますが、このアクションにより、この検索アイコンもクリックであることをユーザーに知らせます。また、しばらくすると検索結果が異なる可能性があるライブ更新を行うアプリケーション（ライブトラッキング、オンラインニュース、ソーシャルメディアニュースフィードなど）にも役立ちます。
左側のメニューにあるGoogleアナリティクスの検索バーで使用されるパターンと同様のパターンに従うことをお勧めします。
まず、検索アイコンを左に移動します。
- 検索ボックスが空の場合、検索アイコンをクリックしても何も起こりません。
- 検索ボックスにいくつかの結果がある場合、検索アイコンをクリックしても何も起こりません：）
Googleアナリティクスの例では、特にアイコンが左側にあるため、ユーザーの注意をそらさないため、この動作は適切に機能します。
注：Googleには検索をクリアするための「x」はありませんが、このパターンは「x」でもうまく機能すると思います。