Autocomplete 苗条和自动完成-访问其他选定数据

Autocomplete 苗条和自动完成-访问其他选定数据,autocomplete,svelte,html-framework-7,Autocomplete,Svelte,Html Framework 7,我正在混合应用程序中使用Framework7(苗条)。我使用的是一个自动完成搜索功能,在选择值时,会打开一个带有所选值附加信息的工作表模式。autocomplete工作正常,工作表模式打开并显示所选值的名称{selectedDrug}。我遇到的问题是如何显示所选药物数据中的附加信息。我试过很多方法,比如 {#if selectedDrug} {#each items as item} <li>{item.name} {item.route}</li&

我正在混合应用程序中使用Framework7(苗条)。我使用的是一个自动完成搜索功能,在选择值时,会打开一个带有所选值附加信息的工作表模式。autocomplete工作正常,工作表模式打开并显示所选值的名称
{selectedDrug}
。我遇到的问题是如何显示所选药物数据中的附加信息。我试过很多方法,比如

     {#if selectedDrug}
   {#each items as item}
      <li>{item.name} {item.route}</li>
    {/each}
{/if} 
html:

<form class="searchbar" id="searchbar-drugs">
            
                <input class="drugsearch" type="search" placeholder="Search Drugs - Quick Dose" items={items} bind:value={selectedDrug} >
                <i class="searchbar-icon"></i>
                <span class="input-clear-button closeDrugsheet sheet-close"></span>
          </form>




<Sheet class="demo-sheet" opened={sheetOpened} onSheetClosed={() => sheetOpened = false}>
<Toolbar>
  <div class="right">
    <Link sheetClose>Close</Link>
  </div>
</Toolbar>
<!--  Scrollable sheet content -->
<PageContent>
 
    <div id="drugSearchPage" class="flex flex-wrap px-0">

  <div class="card-content">
 <div id="results">
   
  {selectedDrug}

 </div>
 </div>
 </div>
       </PageContent>
  </Sheet>

sheetOpened=false}>
接近
{选择药物}
export default [
{
        "perkg": "mg/kg",
        "name": "Aspirin",
        "route": "PO",
        "dosestep": "0.1",
        "dosemax": "20",
        "appendose": "mg",
        "dosevalue": "10",
        "concentration": "81",
        "concSelect": [
            {
                "name": "81mg",
                "value": 81,
                "perml": "tab"
            },
            {
                "name": "325mg",
                "value": 325,
                "perml": " tab"
            },
            {
                "name": "500mg",
                "value": 500,
                "perml": " tab"
            }
        ]
    } ...
]
<form class="searchbar" id="searchbar-drugs">
            
                <input class="drugsearch" type="search" placeholder="Search Drugs - Quick Dose" items={items} bind:value={selectedDrug} >
                <i class="searchbar-icon"></i>
                <span class="input-clear-button closeDrugsheet sheet-close"></span>
          </form>




<Sheet class="demo-sheet" opened={sheetOpened} onSheetClosed={() => sheetOpened = false}>
<Toolbar>
  <div class="right">
    <Link sheetClose>Close</Link>
  </div>
</Toolbar>
<!--  Scrollable sheet content -->
<PageContent>
 
    <div id="drugSearchPage" class="flex flex-wrap px-0">

  <div class="card-content">
 <div id="results">
   
  {selectedDrug}

 </div>
 </div>
 </div>
       </PageContent>
  </Sheet>