Php Can'；在Laravel 5.4中自动实时生成slug

我想在用户输入标题时自动生成slug

<div class="form-group">
    <label for="name">Title of News</label>
    <input type="text" class="form-control" id="name" name="name"
            placeholder="Enter your title of news"
            value="@if(isset($news->name)){{ old('name', $news->name) }}@else{{old('name')}}@endif">
</div>

<div class="form-group">
    <label for="slug">Slug</label>
    <input type="text" class="form-control" id="slug" name="slug"
        placeholder="slug"
        {{!! isFieldSlugAutoGenerator($dataType, $dataTypeContent, "slug") !!}}
        value="@if(isset($news->name)){{ str_slug($news->name, '-') }}@endif">
</div>

<script>
    $('document').ready(function () {

        $('#slug').slugify();
    });
</script>

新闻标题
鼻涕虫
$（'document'）.ready（函数（）{
$（'#slug'）.slagify（）；
});

问题是：

当我在新闻标题中输入文本时，它不会实时更改

因为它不会实时更改，所以无法正确保存slug

例如：

当我在新闻的

Title

字段中输入时：

Apple iPhone 7

->单击保存按钮。字段

slug

不包含任何值

接下来，我将新闻的标题改为苹果计划发布IOS 11，点击保存按钮。数据库中的字段

slug

更改为

Apple iPhone 7

您可以在gif上看到：

---

您的控制器：

function store(Request $request) {
  $this->validate($request, [
    'title' => 'required'
  ]);

  $news = News::create($request->all());
  $news->slug = str_slug($request->title, '-');
  $news->save();

  return redirect()->back();
}

<div class="form-group">
  <label for="name">Title of News</label>
  <input type="text" class="form-control" id="name" name="name"
  placeholder="Enter your title of news"
  value="@if(isset($news->name)){{ old('name', $news->name) }}@else{{old('name')}}@endif">
</div>
<p>The slug will be <span id="slug"></span></p>

<script>
  $('document').ready(function () {

    $(document).on('change', 'input#name', function() {
      var slug = slugify($(this).val());
      $('span#slug').text(slug);
    });

  });

  function slugify(text)
  {
    return text.toString().toLowerCase()
    .replace(/\s+/g, '-')           // Replace spaces with -
    .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
    .replace(/\-\-+/g, '-')         // Replace multiple - with single -
    .replace(/^-+/, '')             // Trim - from start of text
    .replace(/-+$/, '');            // Trim - from end of text
  }
</script>

您的观点：

function store(Request $request) {
  $this->validate($request, [
    'title' => 'required'
  ]);

  $news = News::create($request->all());
  $news->slug = str_slug($request->title, '-');
  $news->save();

  return redirect()->back();
}

<div class="form-group">
  <label for="name">Title of News</label>
  <input type="text" class="form-control" id="name" name="name"
  placeholder="Enter your title of news"
  value="@if(isset($news->name)){{ old('name', $news->name) }}@else{{old('name')}}@endif">
</div>
<p>The slug will be <span id="slug"></span></p>

<script>
  $('document').ready(function () {

    $(document).on('change', 'input#name', function() {
      var slug = slugify($(this).val());
      $('span#slug').text(slug);
    });

  });

  function slugify(text)
  {
    return text.toString().toLowerCase()
    .replace(/\s+/g, '-')           // Replace spaces with -
    .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
    .replace(/\-\-+/g, '-')         // Replace multiple - with single -
    .replace(/^-+/, '')             // Trim - from start of text
    .replace(/-+$/, '');            // Trim - from end of text
  }
</script>

新闻标题
鼻涕虫将被杀死

$（'document'）.ready（函数（）{
$（文档）.on（'change'，'input#name'，function（）{
var slug=slagify（$（this.val（））；
$（'span#slug'）。文本（slug）；
});
});
函数slugify（文本）
{
返回text.toString（）.toLowerCase（）
.replace（/\s+/g，'-'）//将空格替换为-
.replace（//[^\w\-]+/g'，）//删除所有非单词字符
.replace（/\-\-+/g，'-'）//将多个-替换为单个-
.replace（/^-+/，''）//修剪-从文本开始
.replace（//-+$/，“”）；//修剪-从文本末尾开始
}

---

我没有试过，但应该有用。您可能需要适应您的系统，但想法就在这里。

您的控制器：

function store(Request $request) {
  $this->validate($request, [
    'title' => 'required'
  ]);

  $news = News::create($request->all());
  $news->slug = str_slug($request->title, '-');
  $news->save();

  return redirect()->back();
}

<div class="form-group">
  <label for="name">Title of News</label>
  <input type="text" class="form-control" id="name" name="name"
  placeholder="Enter your title of news"
  value="@if(isset($news->name)){{ old('name', $news->name) }}@else{{old('name')}}@endif">
</div>
<p>The slug will be <span id="slug"></span></p>

<script>
  $('document').ready(function () {

    $(document).on('change', 'input#name', function() {
      var slug = slugify($(this).val());
      $('span#slug').text(slug);
    });

  });

  function slugify(text)
  {
    return text.toString().toLowerCase()
    .replace(/\s+/g, '-')           // Replace spaces with -
    .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
    .replace(/\-\-+/g, '-')         // Replace multiple - with single -
    .replace(/^-+/, '')             // Trim - from start of text
    .replace(/-+$/, '');            // Trim - from end of text
  }
</script>

您的观点：

function store(Request $request) {
  $this->validate($request, [
    'title' => 'required'
  ]);

  $news = News::create($request->all());
  $news->slug = str_slug($request->title, '-');
  $news->save();

  return redirect()->back();
}

<div class="form-group">
  <label for="name">Title of News</label>
  <input type="text" class="form-control" id="name" name="name"
  placeholder="Enter your title of news"
  value="@if(isset($news->name)){{ old('name', $news->name) }}@else{{old('name')}}@endif">
</div>
<p>The slug will be <span id="slug"></span></p>

<script>
  $('document').ready(function () {

    $(document).on('change', 'input#name', function() {
      var slug = slugify($(this).val());
      $('span#slug').text(slug);
    });

  });

  function slugify(text)
  {
    return text.toString().toLowerCase()
    .replace(/\s+/g, '-')           // Replace spaces with -
    .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
    .replace(/\-\-+/g, '-')         // Replace multiple - with single -
    .replace(/^-+/, '')             // Trim - from start of text
    .replace(/-+$/, '');            // Trim - from end of text
  }
</script>

新闻标题
鼻涕虫将被杀死

$（'document'）.ready（函数（）{
$（文档）.on（'change'，'input#name'，function（）{
var slug=slagify（$（this.val（））；
$（'span#slug'）。文本（slug）；
});
});
函数slugify（文本）
{
返回text.toString（）.toLowerCase（）
.replace（/\s+/g，'-'）//将空格替换为-
.replace（//[^\w\-]+/g'，）//删除所有非单词字符
.replace（/\-\-+/g，'-'）//将多个-替换为单个-
.replace（/^-+/，''）//修剪-从文本开始
.replace（//-+$/，“”）；//修剪-从文本末尾开始
}

---

我没有试过，但应该有用。您可能需要适应您的系统，但想法就在这里。

这是因为您没有听到标题输入的更改。因此，slug是用旧标题初始化的，不会更改。但我不明白你为什么要用slug的输入。如果你正在数据库中保存slug，那么为什么slug输入的值是

@If（isset（$news->name））{{str_slug（$news->name，'-'）}@endif

而不是

$news->slug

？@Treast你能为我的案例添加一个例子吗？好的，告诉我你是否想手动更改slug？不，我希望它在输入新闻标题时自动生成。Hi@Treast。您在线吗？这是因为您没有听到标题输入的更改。因此，slug是用旧标题初始化的，不会更改。但我不明白你为什么要用slug的输入。如果你正在数据库中保存slug，那么为什么slug输入的值是

@If（isset（$news->name））{{str_slug（$news->name，'-'）}@endif

而不是

$news->slug

？@Treast你能为我的案例添加一个例子吗？好的，告诉我你是否想手动更改slug？不，我希望它在输入新闻标题时自动生成。Hi@Treast。你在线吗？嗨@Treast，你能为用户制作一个版本吗？可以编辑

slug

？太好了！很高兴听到：）嗨@Treast，你能为用户制作一个版本吗？可以编辑

slug

？太好了！很高兴听到这个消息：）