一つの検索フォームで複数の項目を検索したい

Question

実現したいこと

検索画面にて、曲名とアーティスト名を一つの検索フォームで検索できるようにしたい。

前提

音楽アプリを作成しています。検索画面にて、曲名とアーティスト名を一つの検索フォームで検索できるようにしたいのですが、現状できていない状況です。
ご教示いただけますと幸いです。

該当のソースコード（html）

<form th:action="@{/search}" method="get" th:object="${musicForm}">
   <input class="what_search" type="text" name="songTitle" th:field="*{songTitle}"
                 maxlength="300" autocorrect="off" autocapitalize="off"
                 spellcheck="false" placeholder="曲名を入力してください"
                 data-testid="search-input" data-encore-id="type"
                 value style="color: rgb(0, 0, 0);">
   </form>
<form th:action="@{/search}" method="get" th:object="${artistForm}">
   <input class="what_search" type="text" th:field="*{artistName}"
                         maxlength="300" autocorrect="off" autocapitalize="off"
                         spellcheck="false" placeholder="アーティスト名を入力してください"
                         data-testid="search-input" data-encore-id="type"
                         value style="color: rgb(0, 0, 0);">
  </form>

※ここのinputタグを一つにして、一つの検索フォームで曲名とアーティスト名を検索できるようにしたい

該当のソースコード（Controller）

 @GetMapping("/search")
    public ModelAndView searchTop(@ModelAttribute("musicForm") MusicForm musicForm,
                                  @ModelAttribute("artistForm") ArtistForm artistForm,
                                  HttpSession session){
        ModelAndView mav = new ModelAndView();

        UserForm loginUser = (UserForm) session.getAttribute("loginUser");
        mav.addObject("loginUser", loginUser);

        //artistの取得
        List<ArtistForm> allArtists = artistService.findAllArtists(artistForm);
        for (ArtistForm artist : allArtists) {
            String encodedImage = photoView(artist.getArtistImagePath()); // 画像をエンコードして取得
            artist.setArtistImagePath(encodedImage); // エンコードされた画像をセット
        }
        mav.addObject("allArtists", allArtists);

        //musicの取得
        List<MusicForm> musics =  musicService.findMusics(musicForm);
        for (MusicForm music : musics) {
            music.setFavorite(0);
            String encodedImage = photoView(music.getSongImagePath()); // 画像をエンコードして取得
            music.setSongImagePath(encodedImage); // エンコードされた画像をセット
        }
        mav.addObject("musics", musics);

        //Form for Search
        mav.addObject("musicForm", musicForm);
        //ViewName
        mav.setViewName("/search");

        return mav;
    }

該当のソースコード（Service）

public List<ArtistForm> findAllArtists(ArtistForm artistForm) {
        List<Artist> results = new ArrayList<>();
        String searchArtistName = null;
        if (artistForm.getArtistName() != null && !artistForm.getArtistName().isEmpty()) {
            searchArtistName = "%" + artistForm.getArtistName() + "%";
        }
        results = artistRepository.refineSearch(searchArtistName);
        List<ArtistForm> artistForms =setArtistForm(results);
        return artistForms;
    }

public List<MusicForm> findMusics(MusicForm musicForm) {
        List<Music> results = new ArrayList<>();
        String searchSongTitle = null;
        if (musicForm.getSongTitle() != null && !musicForm.getSongTitle().isEmpty()) {
            searchSongTitle = "%" + musicForm.getSongTitle() + "%";
        }
        results = musicRepository.refineSearch(searchSongTitle);
        List<MusicForm> musics = setMusicForm(results);
        return musics;
    }

該当のソースコード（Repository）

--------------MusicRepository---------------
@Query("SELECT i FROM Music i WHERE " +
            "(:songTitle IS NULL OR i.songTitle LIKE :songTitle) " +
            "ORDER BY i.id ASC")
    List<Music> refineSearch(@Param("songTitle") String songTitle);

--------------ArtistRepository---------------
@Query("SELECT i FROM Artist i WHERE " +
            "(:artistName IS NULL OR i.artistName LIKE :artistName) " +
            "ORDER BY i.id ASC")
    List<Artist> refineSearch(@Param("artistName") String artistName);

補足情報

一応、曲名とアーティスト名のそれぞれの検索フォームでの検索はできています。
ですが、検索フォームを一つにしたいので、ご教示いただけますと幸いです。よろしくお願いいたします。

Comments

[hoshi-takanori]

一つの form には複数の input を持てるので、「一つの検索フォーム」という言い方はちょっと曖昧ですね。
入力欄を一つにしたいなら、そこに入力された検索語で曲名とアーティスト名のそれぞれの検索を行い、結果をまとめて表示すれば良いかと。

Answer 1

ビューとモデルが MusicForm/ArtistForm という内部データに対応するクラスで結び付いているから自由度が無いのでしょう。
検索に関する情報を持たせる SearchForm というようなクラスを新設し、 songTitle/artistName を検索する文字列を保持する searchText とかのフィールドを持たせれば、 Controller は SearchForm オブジェクトを受け取って searchText で musicRepository/artistRepository を検索することが出来るでしょう。

ついでに。
このコードは SQL インジェクション 攻撃を受ける可能性があります。
入力から文字列編集で SQL を作らず、データベースドライバの機能等を使って適切に入力のエスケープ処理をして下さい。