kintone 在應用程式的首頁畫面中有內建搜尋功能，可以透過清單或圖表將搜尋條件定義好，每次就可以點選該清單顯示出篩選後的內容。

但是如果每次要搜尋的內容都不一樣，就要每次再打開清單，輸入搜尋條件後再篩選，過程中要按不少按鈕，稍嫌麻煩。所以這個章節，我們一起來製作在應用程式首頁中的搜尋功能，我們會在上方放入一個 input 的搜尋框，讓使用者可以在這個欄位搜尋自己想要的值。

環境建置

使用我們公司內部開發的工具 create-krsb，快速建立開發環境，所以終端機打上：

npm create krsb

接著選 Vue3，再輸入 .env 的環境變數即可，因為發 API 我習慣用 Axios，所以也順便安裝一下。

應用程式表單

我們放上三個欄位，分別是：客戶姓名、居住縣市、消費金額。

建立按鈕並監聽

打開 ./src/App.vue 並在這支檔案，並撰寫一個搜尋的函式，會用到 Rest API 的 GET 方法：

<script setup>
import axios from 'axios'

// 搜尋所有 records
const search = async () => {
  try {
    const response = await axios.get('/k/v1/records.json', {
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
      },
      params: {
        app: '98' // 目前的應用程式 ID
      }
    })
    console.log(response)
  } catch(e) {
    console.log(e)
  }
}

</script>

<template>
  <div class="content">
    <input type="text" @keypress.enter="search">
  </div>
</template>

如此一來，只要在這個 input 框按下 enter，就會搜尋這個應用程式的所有 record 了。

帶上 query 搜尋

但我們並不是要拿到全部的資料，我們是想要把使用者輸入的值拿來搜尋，所以來建立一個 ref 來存資料，並綁訂在 input：

// script setup 
const inputValue = ref('')

// template
<input v-model="inputValue" type="text" @keypress.enter="search">

再接著把這個值帶到搜尋的函式：

const inputValue = ref('')

const search = async () => {
  try {
    const response = await axios.get('/k/v1/records.json', {
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
      },
      params: {
        app: '98',
        query: `city in ("${inputValue.value}")`
      }
    })
    console.log(response)
  } catch(e) {
    console.log(e)
  }
}

最後的 console.log(response) 就會顯示出我們的資料了。

儲存資料並顯示在畫面

已經可以成功取回資料後，我們再建立一個 ref 來存資料

const records = ref([])

並且把剛剛 API 取回的資料放進去：

records.value = response.data.records

最後渲染到畫面上：

<ul>
  <li v-for="{ name, city } in records">
    <p>{{ name.value }}</p>
    <p>{{ city.value }}</p>
  </li>
</ul>

完整程式碼

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const inputValue = ref('')
const records = ref([])

const search = async () => {
  try {
    const response = await axios.get('/k/v1/records.json', {
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
      },
      params: {
        app: '98',
        query: `city in ("${inputValue.value}")`
      }
    })
    records.value = response.data.records
  } catch(e) {
    console.log(e)
  }
}

</script>

<template>
  <div class="content">
    <input v-model="inputValue" type="text" @keypress.enter="search">
    <ul>
      <li v-for="{ name, city } in records">
        <p>{{ name.value }}</p>
        <p>{{ city.value }}</p>
      </li>
    </ul>
  </div>
</template>