当数据输入需要一些验证时，每个人都需要一点帮助。今天，我们提供了一种方法，根据用户的输入给用户一些数据提示。
获得高级管理人员手册的重要趋势、技巧和战略，以竞争和赢得数字经济。
当数据输入需要一些验证时，每个人都需要一点帮助。今天，我们提供了一种方法，根据用户的输入给用户一些数据提示。
在最近的一个项目中，我被要求创建一个带有“永久占位符”的文本框。
whaaaaa吗?
所以我决定继续跟进，询问他们是什么意思。
“你知道……因此，当用户不知道公司的正确名称时，他们可以得到提示。
“当他们打字时，会在文本框中显示一个可能的公司名称。”
在搜索之后，我从Geoff Graham的CSS技巧中找到了这个例子。这正是他们所谈论的，但无济于事。
看到的第一个名字吗?他们输入第一个字母，建议把剩下的字母作为突出的文本显示出来。
它所做的唯一一件事就是给我提供我所需要的功能。
GIF动画是最终的目标，但如何做到这一点是一个难题。
要求自动填充让我们检查一下如何让这个文本框起作用。
-
当他们开始键入公司名称时，他们可能会停下来考虑拼写，并要求提示。
-
我们应该检查数据库的部分公司名称。
-
在文本框中显示高亮显示或灰色显示的建议。
-
一旦他们对自己的输入感到满意，他们就会点击tab进入下一个领域，他们的公司名称就会被接受。
1 2和4并不难。3是这个问题。
为什么?
如果我们想要使用灰色的文本，而不是突出显示的文本，那么文本框中就没有一种方法可以将文本显示为一种颜色，而另一种颜色的建议则是另一种颜色。
高亮文本可能是实现这一点的更好方法，但是当我们到达它的时候，我们会跨越那个灰色的桥。
概述首先，我们需要一个文本框。
@using (Html.BeginForm())
{
<div class="form-group">
<div class="row">
<div class="col-md-4">
@Html.Label("Company", "company:")
<span class="autofill">
@Html.TextBox("CompanyTextBox", String.Empty, new
{
@class = "form-control input-sm"
})
</span>
<p class="help-block">Enter the company name (i.e. Apple, Microsoft).</p>
</div>
</div>
</div>
}
繁荣!完成了!
进行呼叫!接下来，我们需要一个API来根据输入检索我们的公司。我使用一个假的数据库调用创建了一个服务控制器(您可以根据您认为合适的方式修改它)。
我添加了一个名为Servicescontroller的新项目(Web API控制器类)。
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
namespace AutofillDemo
{
[Route("api/[controller]")]
public class ServicesController : Controller
{
// GET api/<controller>/5
[HttpGet("{id}")]
public List<string> Get(string id)
{
var partialCompanyName = id;
// Create a repository to access your database here.
// For now, we'll create a small list
// of companies for demonstration purposes.
var list = new List<string>
{
"Apple",
"Microsoft",
"Google",
"MicroCenter",
"Microtek",
"MicroSystems"
};
var company = list.OrderBy(e => e).FirstOrDefault(e =>
e.startsWith(partialCompanyName));
// if company is null, use an empty string.
// Else, use the company. :-)
return new List<string> { company ?? "" };
}
}
}
我从API中删除了附加的HTTP谓词，因为我们现在不需要它们。
由于我们已经构建了web服务，您可以通过运行应用程序并在浏览器中输入http://localhost:/api/Services/Micro，来测试它。我们的服务应该还回来。“MicroCenter。”
完美!
一些(JavaScript)组装要求现在我们已经有了HTML和web服务，我们需要JavaScript来实现这个奇迹。
我们的一个要求是，我们需要给用户足够的时间来完成输入。一旦他们停下来，给他们一两秒钟想想。
对于这个功能，我们需要在某个延迟之后执行一个函数。
我们还需要一个函数来突出(或选择)其余的字符，这样我们就可以继续输入提示信息了。
$.fn.delayKeyup = function (n, t) {
var i = 0;
return $(this).keyup(function () {
clearTimeout(i);
i = setTimeout(n, t);
}),
$(this)
};
$.fn.selectRange = function (start, end) {
return this.each(function () {
if (this.setSelectionRange) {
this.focus();
this.setSelectionRange(start, end);
} else if (this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
});
};
当然，您需要jQuery来实现这些功能。
selectRange检查我们在if语句中使用哪个浏览器。
让我们设置事件来使用这些函数。
$(function() {
var company = $("#CompanyTextBox");
$(company).delayKeyup(function() {
var partialCompanyName = $(company).val();
// if there's nothing there, don't do anything.
if (partialCompanyName.length === 0) {
return false;
}
// grab company names based on the partial
$.getJSON("/api/Services/" partialCompanyName)
.done(function(data) {
if (data) {
var returnedCompany = data[0];
// Remaining highlighted characters
$(company).val(returnedCompany);
$(company).selectRange(partialCompanyName.length,
returnedCompany.length);
}
})
.fail(function() {
console.log("error");
});
}
, 1000);
});
获取用户输入后，我们检查它是否为空。如果是的话，停止你正在做的事情，然后返回false。
在验证输入之后，我们通过我们的API请求返回公司名称。
我们将返回的公司名称设置在文本框中，并根据用户的输入设置所选字符的范围。
底部的1000是1秒超时。你可以自行决定，但不要让他们等待太久。
结论虽然我们可以使用建议下拉，但我觉得这是一个挑战，给用户提供提示，而不需要点击下拉菜单。
这种特殊的技术让我思考——我们可以通过把突出显示的字符(如本文开头所提到的)，让它们变得更透明，就像一个占位符吗?
怎么可能呢?我有个主意，请继续。
你认为你知道如何做透明的占位符吗?我们需要CSS吗?在下面发表你的评论，让我们讨论一下。
,
