Javascript 加载指示器自动完成

Javascript 加载指示器自动完成,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我已经为我的web应用程序中的文本框实现了自动完成功能。 这里的问题是我的文本框的宽度是100px。加载指示器是用户开始键入文本框时添加到文本框中的背景css 我希望加载指示器位于页面的最右侧 但是,由于所指示的是附加到文本框Width=100px的,因此加载指示器保持在其中 请告诉我如何将装载指示器放置在最右边 一个选项是将元素包装在包装器div中,然后使用:after伪选择器在加载指示器中添加演示中的文本图像,将其替换为并使用背景图像以及高度和宽度。这两个示例显示了在右侧的输入中进行辩护,或

我已经为我的web应用程序中的文本框实现了自动完成功能。 这里的问题是我的文本框的宽度是100px。加载指示器是用户开始键入文本框时添加到文本框中的背景css

我希望加载指示器位于页面的最右侧

但是,由于所指示的是附加到文本框Width=100px的,因此加载指示器保持在其中

请告诉我如何将装载指示器放置在最右边

一个选项是将元素包装在包装器div中,然后使用:after伪选择器在加载指示器中添加演示中的文本图像,将其替换为并使用背景图像以及高度和宽度。这两个示例显示了在右侧的输入中进行辩护,或在页面的右侧进行辩护

HTML


到目前为止你试过什么?你能至少给我们举一个你正在使用的标记和你用来定位东西的CSS的例子吗?加载指示器需要是一个单独的元素,带有position:absolute set。
<div class='wrapper'><input type='text' /></div>
<br>
<div class='wrapper'><input type='text' /></div>
html, body{
    position:relative;
    width:100%;
    padding:0;
    margin:0;
}
input{
    width:100px;
}
.wrapper{
    display:inline-block;
}
.wrapper:first-child{
   position:relative;
}
.wrapper:after{
   position:absolute;
   content:'Image';
    right:0;
}