Javascript SVELTE中即时搜索和列表选择的几个问题

我有下面的代码。预期的行为如下所示：

页面加载时，表单字段应处于焦点位置

当用户单击向上/向下箭头时，列表中的项目应通过CSS背景颜色更改进行选择

当用户在表单字段中键入时，“即时搜索”将应用于列表，并且仅显示与搜索匹配的项目

如果用户键入的项目不在列表中，并且他们提交了该项目，则页面应自动更新，同时显示列表和列表中的新项目

在第四步之前，一切似乎都正常。如果尝试向列表提交项目，则页面不会使用新项目更新，表单将失去焦点

我以前使用ref和useffect创建过这个脚本。我正在探索SVELTE，看看类似的脚本是什么样子

谢谢大家!

交互式示例：

从“svelte”导入{onMount}；
let clients=[“一只小猪”、“b只小猪”、“c只小猪”]//硬编码api数据
让clientsClone=[…客户端]；
设indexVal=-1；
下压箭头=40；
让向上箭头按下=38；
让clientInputExtField=“”；
设selectedClient=“”；
//______________________页面加载时开始焦点输入字段
onMount（函数（）{
clientInputTextField.focus（）；
});
//_______________________页面加载时结束焦点输入字段。
//开始即时搜索算法
函数instantSearch（查询，listArr）{
设arr=[…listArr]
让newList=[]
arr.map（val=>{
query.split（“”）.map（word=>{
if（val.toLowerCase（）.indexOf（word.toLowerCase（））！=-1）{
newList.push（val）
}
})
})
console.log（newList）
返回新列表
}
//_________________________结束即时搜索算法
函数handleKeydown（事件）{
如果（event.keyCode==向上箭头按）{
指数-=1；
indexVal=indexVal<0？客户端。长度：indexVal
console.log（indexVal）；
}
如果（event.keyCode==向下箭头按）{
指数+=1；
indexVal=indexVal>clients.length？0:indexVal
console.log（indexVal）；
}
if（indexVal>clients.length-1 | | indexVal<0）{
clientInputTextField.focus（）；
}否则{
clientInputTextField.blur（）
}
}
功能搜索项（事件）{
console.log（event.target.value）
让结果=instantSearch（event.target.value，客户端）；
clientsClone=[…结果]
console.log（结果）
}
函数handleSubmit（）{
console.log（selectedClient）
clients.push（selectedClient）
selectedClient=“”；
}

{#每个客户都有一个客户，我}
{#如果i==indexVal}
{client}
{:else}
{client}
{/if}
{/每个}

编辑

“即时搜索”是如此混乱，以至于我实际上只有以下代码工作：

从“svelte”导入{onMount}；
let clients=[“一只小猪”、“b只小猪”、“c只小猪”]；
设indexVal=-1；
下压箭头=40；
让向上箭头按下=38；
让clientInputExtField=“”；
onMount（函数（）{
clientInputTextField.focus（）；
});
函数handleKeydown（事件）{
如果（event.keyCode==向上箭头按）{
指数-=1；
indexVal=indexVal<0？客户端。长度：indexVal
console.log（indexVal）；
}
如果（event.keyCode==向下箭头按）{
指数+=1；
indexVal=indexVal>clients.length？0:indexVal
console.log（indexVal）；
}
if（indexVal>clients.length-1 | | indexVal<0）{
clientInputTextField.focus（）；
}否则{
clientInputTextField.blur（）
}
}

{#每个客户都是客户，我}
{#如果i==indexVal}
{client}
{:else}
{client}
{/if}
{/每个}

您需要将事件处理程序附加到侦听

submit

事件的表单。要获取

输入

字段的值，还需要给它一个

名称

属性：

请注意，

preventDefault

修饰符阻止页面实际提交表单（即更改URL）。根据您的用例，您可能不希望出现这种行为

然后，要更新

客户端列表

，您可以定义一个简单的

handleSubmit

函数，如下所示：

函数handleSubmit（e）{
常量值=e.target.input.value；
客户端=[…客户端，值]
}

将其添加到编辑的代码后，完整示例如下所示：

从“svelte”导入{onMount}；
let clients=[“一只小猪”、“b只小猪”、“c只小猪”]；
设indexVal=-1；
下压箭头=40；
让向上箭头按下=38；
让clientInputExtField=“”；
onMount（函数（）{
clientInputTextField.focus（）；
});
函数handleKeydown（事件）{
如果（event.keyCode==向上箭头按）{
指数-=1；
indexVal=indexVal<0？客户端。长度：indexVal
console.log（indexVal）；
}
如果（event.keyCode==向下箭头按）{
指数+=1；
indexVal=indexVal>clients.length？0:indexVal
console.log（indexVal）；
}
if（indexVal>clients.length-1 | | indexVal<0）{
<script>
    import { onMount } from 'svelte';
    let clients = ["a Little piggy","b little piggy","c little piggy"]; //hard coded api data
    let clientsClone = [...clients];
    let indexVal = -1;
    let downArrowPress = 40;
    let upArrowPress = 38;
    let clientInputTextField = "";
    let selectedClient = "";

     //______________________BEGIN focus input field on page load

     onMount(function() {
        clientInputTextField.focus();
     });

     //_______________________END focus input field on page load.


     // ______________________BEGIN instant search algorithm 
    function instantSearch(query,listArr) {
        let arr = [...listArr]
        let newList = []

       arr.map(val =>{
            query.split(" ").map(word =>{
                if(val.toLowerCase().indexOf(word.toLowerCase()) != -1){
                    newList.push(val)
                }
            })
       })
       
       console.log(newList)
       return newList
    }
    //_________________________END instant search algorithm


    function handleKeydown(event){
        
    
        if(event.keyCode === upArrowPress){
           indexVal-=1;    
           indexVal = indexVal < 0 ?  clients.length : indexVal
           console.log(indexVal);
        }

        if(event.keyCode === downArrowPress){
           indexVal+=1;
           indexVal = indexVal > clients.length ?  0 : indexVal
           console.log(indexVal);
        }

        if(indexVal > clients.length -1 || indexVal < 0){
           clientInputTextField.focus(); 
        }else{
            clientInputTextField.blur()
        }
    
     }

     
     function searchItems(event){
        console.log(event.target.value)
        let result = instantSearch(event.target.value, clients);
        clientsClone = [...result]
        console.log(result)
        
     }


     function handleSubmit(){
  
        console.log(selectedClient)
        clients.push(selectedClient)
        selectedClient = "";


     }




</script>


<svelte:window on:keydown={handleKeydown}/>

<form on:submit|preventDefault={handleSubmit}>
    <input type="text" name=""  on:input={searchItems} bind:this={clientInputTextField} bind:value={selectedClient}>
    <input type="submit" name="">
</form>



<ul>
    {#each clientsClone as client, i}
        {#if i === indexVal}
            <li style="background-color:orange">{client}</li>
            {:else}
            <li style="">{client}</li>
        {/if}
    {/each}
</ul>

<script>
    import { onMount } from 'svelte';
    let clients = ["a Little piggy","b little piggy","c little piggy"]; 
    let indexVal = -1;
    let downArrowPress = 40;
    let upArrowPress = 38;
    let clientInputTextField = "";



     onMount(function() {
        clientInputTextField.focus();
     });



    function handleKeydown(event){
        
    
        if(event.keyCode === upArrowPress){
           indexVal-=1;    
           indexVal = indexVal < 0 ?  clients.length : indexVal
           console.log(indexVal);
        }

        if(event.keyCode === downArrowPress){
           indexVal+=1;
           indexVal = indexVal > clients.length ?  0 : indexVal
           console.log(indexVal);
        }

        if(indexVal > clients.length -1 || indexVal < 0){
           clientInputTextField.focus(); 
        }else{
            clientInputTextField.blur()
        }
    
     }






</script>


<svelte:window on:keydown={handleKeydown}/>

<form>
    <input type="text" name="" bind:this={clientInputTextField} >
    <input type="submit" name="">
</form>



<ul>
    {#each clients as client, i}
        {#if i === indexVal}
            <li style="background-color:orange">{client}</li>
            {:else}
            <li style="">{client}</li>
        {/if}
    {/each}
</ul>